Ah?
This commit is contained in:
filantrop
parent
d5e5fe995b
commit
0364c20240
@ -10,7 +10,9 @@ import React from "react";
|
|||||||
* @return {JSX.Element}
|
* @return {JSX.Element}
|
||||||
*/
|
*/
|
||||||
function App() {
|
function App() {
|
||||||
return <div>Hello world!</div>;
|
return <Scrollbar style={{ width: 250, height: 250 }}>
|
||||||
|
<p>Hello world!</p>
|
||||||
|
</Scrollbar>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
7
src/assets/svg/background.svg
Normal file
7
src/assets/svg/background.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg width="1187" height="1234" viewBox="0 0 1187 1234" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M408.998 745.256C206.829 467.159 -0.745132 678.488 53.4493 872.858C189.728 1182.79 541.828 1319.16 839.898 1177.41C942.643 1128.57 1029.84 1050.24 1091.25 951.643C934.96 1103.83 651.196 1078.4 408.998 745.208V745.256Z" fill="#F0F0F0"/>
|
||||||
|
<path d="M589.732 553.768C311.677 115.242 0.000483082 348.859 0.000483082 616.83C-0.108684 705.549 18.2856 793.237 53.9153 873.85C16.9159 692.296 217.547 552.363 404.339 812.896C675.684 1191.27 941.763 1124.69 1090.72 952.538C1138.53 876.188 1169.42 789.736 1181.14 699.443V700.63C1117.18 906.92 834.959 940.474 589.732 553.768Z" fill="#F5F5F5"/>
|
||||||
|
<path d="M780.298 357.556C573.819 3.33809 311.98 35.3415 134.904 225.06C47.4877 335.363 -0.21692 473.901 0.000741558 616.829C18.6403 357.604 320.112 177.116 593.041 616.829C835.635 1008.16 1137.87 906.216 1180.86 701.744V699.781C1184.64 671.939 1186.24 643.826 1185.66 615.715V587.685C1080.6 665.864 942.439 635.678 780.252 357.532L780.298 357.556Z" fill="#FAFAFA"/>
|
||||||
|
<path d="M781.72 420.618C970.818 736.727 1133.84 655.859 1186.06 588.242C1183.96 540.989 1176.61 494.146 1164.16 448.648C1076.01 450.611 1055.46 435.275 968.721 297.983C836.17 86.7264 669.183 -55.8716 377.451 42.2463C282.888 80.7758 199.359 143.787 134.788 225.303C335.256 33.4762 581.228 85.5393 781.72 420.618Z" fill="white"/>
|
||||||
|
<path d="M955.787 325.116C1042.25 462.675 1094.88 469.676 1164.15 448.672C1074.33 120.595 745.743 -69.6327 430.245 23.761C412.352 29.0424 394.753 35.204 377.449 42.2459C638.053 -43.2499 822.887 113.86 955.787 325.116Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
3
src/assets/svg/selectIcon.svg
Normal file
3
src/assets/svg/selectIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.1315 4.6875H2.86897C2.56116 4.6875 2.38929 5.0125 2.57991 5.23438L7.71116 11.1844C7.85804 11.3547 8.14085 11.3547 8.28929 11.1844L13.4205 5.23438C13.6112 5.0125 13.4393 4.6875 13.1315 4.6875Z" fill="#262626"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 326 B |
111
src/components/MainSection.tsx
Normal file
111
src/components/MainSection.tsx
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
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 TextInputBox from "components/TextInputBox";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = [
|
||||||
|
{ name: "All" },
|
||||||
|
{ name: "Wade Cooper" },
|
||||||
|
{ name: "Arlene Mccoy" },
|
||||||
|
{ name: "Devon Webb" },
|
||||||
|
{ name: "Tom Cook" },
|
||||||
|
{ name: "Tanya Fox" },
|
||||||
|
{ name: "Hellen Schmidt" },
|
||||||
|
];
|
||||||
|
const Items = [
|
||||||
|
{ name: "test" },
|
||||||
|
{ name: "Wade Cooper" },
|
||||||
|
{ name: "Arlene Mccoy" },
|
||||||
|
{ name: "Devon Webb" },
|
||||||
|
{ name: "Tom Cook" },
|
||||||
|
{ name: "Tanya Fox" },
|
||||||
|
{ name: "Hellen Schmidt" },
|
||||||
|
];
|
||||||
|
export default function MainSection({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: Props): JSX.Element {
|
||||||
|
const [value, setValue] = useState(options[0]);
|
||||||
|
const [selectedPerson, setSelectedPerson] = useState<any>(Items);
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
|
let filteredItems =
|
||||||
|
query === ""
|
||||||
|
? Items
|
||||||
|
: Items.filter((item) =>
|
||||||
|
item.name
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/\s+/g, "")
|
||||||
|
.includes(query.toLowerCase().replace(/\s+/g, ""))
|
||||||
|
);
|
||||||
|
|
||||||
|
const removeOption = (e: React.SyntheticEvent) => {
|
||||||
|
const newSelect = filteredItems.filter(
|
||||||
|
(element: any) => element.name !== e
|
||||||
|
);
|
||||||
|
setSelectedPerson(newSelect);
|
||||||
|
};
|
||||||
|
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-semibold 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) => value.name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
<TextInputBox
|
||||||
|
query={query}
|
||||||
|
setQuery={setQuery}
|
||||||
|
onChange={setSelectedPerson}
|
||||||
|
value={selectedPerson}
|
||||||
|
queryItems={filteredItems}
|
||||||
|
displayValueResolver={(value) => value.name}
|
||||||
|
inGroup={true}
|
||||||
|
removeOption={removeOption}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="pr-0.5">
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
const Query = { option: value.name, item: selectedPerson.name };
|
||||||
|
console.log(Query);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
155
src/components/TextInputBox.tsx
Normal file
155
src/components/TextInputBox.tsx
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
import classNames from "classnames";
|
||||||
|
import React from "react";
|
||||||
|
import "../index.css";
|
||||||
|
import { Combobox, Transition } from "@headlessui/react";
|
||||||
|
import { Fragment } from "react";
|
||||||
|
|
||||||
|
type Props<T> = {
|
||||||
|
removeOption: Function;
|
||||||
|
inGroup?: boolean;
|
||||||
|
queryItems?: T[];
|
||||||
|
query: string;
|
||||||
|
setQuery: (element: any) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
value?: T;
|
||||||
|
displayValueResolver?: (element: T) => any;
|
||||||
|
onChange: (element: T) => void;
|
||||||
|
} & Omit<
|
||||||
|
React.ComponentPropsWithRef<"select">,
|
||||||
|
"value" | "onChange" | "queryItems"
|
||||||
|
>;
|
||||||
|
|
||||||
|
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
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
|
function TextInputBox<T>({
|
||||||
|
removeOption,
|
||||||
|
inGroup = false, // We should use this flag to choose how we will style our component
|
||||||
|
query,
|
||||||
|
setQuery,
|
||||||
|
className,
|
||||||
|
queryItems = [],
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
displayValueResolver,
|
||||||
|
disabled,
|
||||||
|
...props
|
||||||
|
}: Props<T>): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className={classNames("", className)}>
|
||||||
|
<Combobox value={value} onChange={onChange}>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="relative w-full bg-white text-left focus:outline-none sm:text-sm">
|
||||||
|
<Combobox.Input
|
||||||
|
className={classNames([
|
||||||
|
[`${inputStyle}`],
|
||||||
|
{ [`${inputInGroup}`]: inGroup },
|
||||||
|
className,
|
||||||
|
])}
|
||||||
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
|
placeholder={"Search..."}
|
||||||
|
displayValue={(value: T) =>
|
||||||
|
displayValueResolver ? displayValueResolver(value) : value
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{query.length > 0 && (
|
||||||
|
<div className={`${inputList}`}>
|
||||||
|
<Transition
|
||||||
|
as={Fragment}
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
afterLeave={() => setQuery("")}
|
||||||
|
>
|
||||||
|
<Combobox.Options>
|
||||||
|
{queryItems.length === 0 && query !== "" ? (
|
||||||
|
<p >Nothing found.</p>
|
||||||
|
) : null}
|
||||||
|
{query.length > 0 && (
|
||||||
|
<Combobox.Option value={{ id: null, name: query }} className="cursor-default">
|
||||||
|
query: "{query}"
|
||||||
|
</Combobox.Option>
|
||||||
|
)}
|
||||||
|
{queryItems.map((item: any, id: number) => (
|
||||||
|
<Combobox.Option
|
||||||
|
key={id}
|
||||||
|
className={({ active, selected }) =>
|
||||||
|
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}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{`${
|
||||||
|
displayValueResolver
|
||||||
|
? displayValueResolver(item)
|
||||||
|
: item
|
||||||
|
}`}
|
||||||
|
<span className=" block relative left-0 right-0 text-gray-200">
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
removeOption(
|
||||||
|
displayValueResolver
|
||||||
|
? displayValueResolver(item)
|
||||||
|
: item
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
x
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Combobox.Option>
|
||||||
|
))}
|
||||||
|
</Combobox.Options>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Combobox>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default TextInputBox;
|
||||||
Loading…
x
Reference in New Issue
Block a user