106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* Imports */
|
|
/* -------------------------------------------------------------------------- */
|
|
import classNames from "classnames";
|
|
import React from "react";
|
|
import Inputgroup from "./Inputgroup";
|
|
import Select from "./Select";
|
|
import { useState } from "react";
|
|
import { Button } from "./Button/Button";
|
|
import { SVGSearch } from "../components/icons";
|
|
import SearchBar from "components/SearchBar";
|
|
|
|
type Props<T, H> = {
|
|
className?: string;
|
|
options: T[];
|
|
hintsValues: H[];
|
|
displayValueResolver?: (element: T) => any;
|
|
};
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component implementation */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
export default function MainSection<T, H>({
|
|
className,
|
|
options,
|
|
hintsValues,
|
|
displayValueResolver,
|
|
...props
|
|
}: Props<T, H>) {
|
|
const [value, setValue] = useState(options[0]); // Category
|
|
|
|
const [hints, setHints] = useState<any[]>([]); //Response list
|
|
const [onSelected, setOnSelected] = useState(""); // Selected item from response list
|
|
const [query, setQuery] = useState(""); // Query
|
|
|
|
const onChange = (query: string) => {
|
|
//console.log(query)
|
|
setQuery(query);
|
|
setHints(hintsValues);
|
|
};
|
|
const onClick = () => {
|
|
console.log(displayValueResolver ? displayValueResolver(value) : value);
|
|
console.log(onSelected);
|
|
console.log(query);
|
|
};
|
|
const searchResolver = (item: any) => {
|
|
setOnSelected(item.caption);
|
|
console.log(onSelected);
|
|
};
|
|
//empty items message
|
|
const IsEmptyItems = () => {
|
|
return <p className="tex-blue-500">Nothing Found</p>;
|
|
};
|
|
|
|
return (
|
|
<div className="bg-main bg-center bg-cover bg-origin-border bg-no-repeat h-full py-32 px-2 sm:px-6 md:px-6 lg:px-0">
|
|
<div className="m-auto text-center font-bold text-4xl ">
|
|
Scientific Library with Free Access
|
|
</div>
|
|
<div className="flex flex-row items-center justify-center space-x-3 pt-2">
|
|
<div className=" text-2xl text-gray-400">Search</div>
|
|
<div className=" text-3xl text-blue-500">320 455</div>
|
|
<div className=" text-2xl text-gray-400">Items</div>
|
|
</div>
|
|
<div className="max-w-xl m-auto pt-16">
|
|
<Inputgroup className="m-0 p-0">
|
|
<div className="flex items-center w-full divide-x-2 divide-solid divide-gray-200">
|
|
<div className="flex w-1/3">
|
|
<Select
|
|
inGroup={true}
|
|
className="w-full top-0"
|
|
options={options}
|
|
value={value}
|
|
onChange={setValue}
|
|
displayValueResolver={(value: any) => value?.name ?? ""}
|
|
/>
|
|
</div>
|
|
<div className="w-full">
|
|
<SearchBar
|
|
className="w-full"
|
|
hints={hints}
|
|
onChange={onChange}
|
|
onSelected={searchResolver}
|
|
inGroup={true}
|
|
IsEmptyItems={IsEmptyItems}
|
|
displayValueResolver={(value: any) => value.caption}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="pr-0.5">
|
|
<Button onClick={onClick}>
|
|
<Button.Icon>
|
|
<SVGSearch className="fill-white stroke-white w-4 "></SVGSearch>
|
|
</Button.Icon>
|
|
</Button>
|
|
</div>
|
|
</Inputgroup>
|
|
<div className="mt-7 pr-1 text-right font-semibold text-sm">
|
|
Advanced Search
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|