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 <h3 className="text-2xl text-current font-medium leading-relaxed">{children}</h3>;
+export default function Heading({ children, className }: Props) {
+ return (
+ <h3
+ className={classNames([
+ className,
+ "text-2xl text-current font-medium leading-7 ",
+ ])}
+ >
+ {children}
+ </h3>
+ );
}
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 (
+ <div
+ className={classNames(
+ "relative overflow-hidden pt-[55%] rounded w-full",
+ className
+ )}
+ >
+ {children}
+ </div>
+ );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+ className,
+ children,
+}: Props) {
+ return (
+ <div className={classNames([className, "absolute top-0 w-full h-full"])}>
+ {children}
+ </div>
+ );
+};
+
+export default AspectRatio;
From c34cac7cee8b968a1bde5f0c916cdffa0d2c6792 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
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<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>
+ );
+}
From 24f44b4352f6cd984f1e65ee759c87b8edb0a722 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
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 @@
+<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>
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)" },