From 21c858b51964cb719feee11439e14ac53a4f2b39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 30 Aug 2022 15:21:36 +0300 Subject: [PATCH 1/4] Edited Heading component --- src/components/typography/Heading.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/typography/Heading.tsx b/src/components/typography/Heading.tsx index a476ea4..324d888 100644 --- a/src/components/typography/Heading.tsx +++ b/src/components/typography/Heading.tsx @@ -1,9 +1,20 @@ import React from "react"; +import classNames from "classnames"; type Props = { + className?: string | undefined; children: React.ReactNode; }; -export default function Heading({ children }: Props) { - return

{children}

; +export default function Heading({ children, className }: Props) { + return ( +

+ {children} +

+ ); } From 6d36b774b2b85dcf46b73c6984631fd0c32fc598 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 30 Aug 2022 15:31:23 +0300 Subject: [PATCH 2/4] Aspect ratio component --- src/components/AspectRatio.tsx | 38 ++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/components/AspectRatio.tsx diff --git a/src/components/AspectRatio.tsx b/src/components/AspectRatio.tsx new file mode 100644 index 0000000..be6a1b8 --- /dev/null +++ b/src/components/AspectRatio.tsx @@ -0,0 +1,38 @@ +import classNames from "classnames"; +import React from "react"; + +export type Props = { + /** + * The style of component + */ + className?: string; + /** + * The optional child + */ + children?: React.ReactNode; +}; +const AspectRatio = ({ className, children }: Props) => { + return ( +
+ {children} +
+ ); +}; + +AspectRatio.Content = function AspectRatioContent({ + className, + children, +}: Props) { + return ( +
+ {children} +
+ ); +}; + +export default AspectRatio; From c34cac7cee8b968a1bde5f0c916cdffa0d2c6792 Mon Sep 17 00:00:00 2001 From: filantrop Date: Wed, 31 Aug 2022 20:10:01 +0300 Subject: [PATCH 3/4] added SearchBar for MainSection --- src/components/SearchBar.tsx | 156 +++++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 src/components/SearchBar.tsx 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}
+ + ))} + {/* */} + + +
+ )} +
+
+ +
+ ); +} From 24f44b4352f6cd984f1e65ee759c87b8edb0a722 Mon Sep 17 00:00:00 2001 From: filantrop Date: Thu, 1 Sep 2022 23:48:08 +0300 Subject: [PATCH 4/4] added bacrground image for main page --- src/assets/svg/background.svg | 7 +++++++ tailwind.config.js | 3 +++ 2 files changed, 10 insertions(+) create mode 100644 src/assets/svg/background.svg 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/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)" },