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: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
backgroundImage: {
|
||||||
|
'main': "url('/src/assets/svg/background.svg')",
|
||||||
|
},
|
||||||
screens: {
|
screens: {
|
||||||
tall: { raw: "(min-height: 1200px) and (orientation: portrait)" },
|
tall: { raw: "(min-height: 1200px) and (orientation: portrait)" },
|
||||||
skewed: { raw: "(max-height: 600px)" },
|
skewed: { raw: "(max-height: 600px)" },
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user