diff --git a/src/assets/svg/background.svg b/src/assets/svg/background.svg new file mode 100644 index 0000000..e15137a --- /dev/null +++ b/src/assets/svg/background.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx new file mode 100644 index 0000000..8698e4b --- /dev/null +++ b/src/components/SearchBar.tsx @@ -0,0 +1,156 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import classNames from "classnames"; +import "../index.css"; +import { Combobox, Transition } from "@headlessui/react"; +import { Fragment, useEffect, useState } from "react"; +import { Scrollbar } from "react-scrollbars-custom"; + +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ +type Hint = { + id: string; + caption: string; +}; + +type Props = { + onChange: (query: string) => void; + onSelected?: (value: Hint) => void; + hints: Hint[]; + disabled?: boolean; + inGroup?: boolean; + className?: string; + maxScrollSize?: number; + elementScrollSize?: number; +}; +/* -------------------------------------------------------------------------- */ +/* styles */ +/* -------------------------------------------------------------------------- */ +const inputStyle = ` + w-full + cursor-default + rounded + overflow-hidden + border + border-solid + shadow-none + border-gray-100 + focus:outline-none + focus:border-gray-200 + hover:border-gray-200 + py-2 pl-3 + text-sm + text-gray-900 +`; + +const inputList = ` + absolute z-10 mt-1 w-full max-h-56 + bg-white shadow-lg + rounded py-1 + overflow-hidden + focus:outline-none + text-base + sm:text-sm`; + +const inputInGroup = [ + `border-none + hover:none + active:none + focus:none + `, +]; + +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ + +export default function TextInputBox({ + onChange, + onSelected, + hints, + disabled, + inGroup, + className, + maxScrollSize = 140, + elementScrollSize = 36, + ...props +}: Props) { + const [selected, setSelected] = useState(hints); + const [query, setQuery] = useState(""); + + useEffect(() => { + onChange(query); + }, [query, onChange]); + + const handleSelected = (value: Hint) => { + setSelected(value); + onSelected && onSelected(value); + }; + return ( +
+ +
+
+ setQuery(event.target.value)} + placeholder={"Search..."} + displayValue={(hint: Hint | undefined) => hint?.caption ?? ""} + /> +
+
+ {query.length > 0 && ( +
+ + + {hints.length === 0 && query !== "" ? ( +

Nothing found.

+ ) : null} + {/* */} + {hints.map((item: any, id: number) => ( + + classNames( + active + ? "text-gray-900 bg-blue-50" + : "font-normal ", + "cursor-default select-none relative py-2 pl-3 pr-9", + selected + ? "text-gray-900 bg-blue-100" + : "font-normal " + ) + } + value={item} + > +
{item.caption}
+ + ))} + {/* */} + + +
+ )} +
+
+ +
+ ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 8f4d294..3c733b6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -96,6 +96,9 @@ module.exports = { ], theme: { extend: { + backgroundImage: { + 'main': "url('/src/assets/svg/background.svg')", + }, screens: { tall: { raw: "(min-height: 1200px) and (orientation: portrait)" }, skewed: { raw: "(max-height: 600px)" },