Merge pull request 'feature/add-background-image' (#119) from feature/add-background-image into develop
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/119
This commit is contained in:
Denis Gorbunov
commit
94d23d7b0b
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 |
156
src/components/SearchBar.tsx
Normal file
156
src/components/SearchBar.tsx
Normal file
@ -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<any>(hints);
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
onChange(query);
|
||||
}, [query, onChange]);
|
||||
|
||||
const handleSelected = (value: Hint) => {
|
||||
setSelected(value);
|
||||
onSelected && onSelected(value);
|
||||
};
|
||||
return (
|
||||
<div className={classNames("w-60", className)}>
|
||||
<Combobox value={selected} {...props} onChange={handleSelected}>
|
||||
<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={(hint: Hint | undefined) => hint?.caption ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{query.length > 0 && (
|
||||
<div className={`${inputList}`}>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Combobox.Options>
|
||||
{hints.length === 0 && query !== "" ? (
|
||||
<p className="">Nothing found.</p>
|
||||
) : null}
|
||||
{/* <Scrollbar
|
||||
style={{
|
||||
height: hints.length * elementScrollSize,
|
||||
maxHeight: maxScrollSize,
|
||||
}}
|
||||
> */}
|
||||
{hints.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>{item.caption}</div>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
{/* </Scrollbar> */}
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -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)" },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user