From f7a5aaf90e15446a65f1d92081cad0f96bca3c37 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Wed, 7 Sep 2022 15:30:31 +0300
Subject: [PATCH] fix props in component
---
src/components/MainSection.tsx | 105 +++++++++++++++++++++++++++++++++
1 file changed, 105 insertions(+)
create mode 100644 src/components/MainSection.tsx
diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx
new file mode 100644
index 0000000..3bc0ad1
--- /dev/null
+++ b/src/components/MainSection.tsx
@@ -0,0 +1,105 @@
+/* -------------------------------------------------------------------------- */
+/* 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>
+ );
+}