Merge branch 'modalWindow' into 'main'

Modal Window

See merge request !3

src/components/BackdropWindow/BackdropWindow.module.css

+.modalWindow_bg {
+    position: absolute;
+    z-index: 99;
+    background-color: rgb(0, 0, 0, 0.67);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.modalWindow_body {
+    background-color: white;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    padding-bottom: 150px;
+    padding: 8px 20px 25px 20px;
+    display: flex;
+    gap: 17px;
+    flex-direction: column;
+    border-radius: 10px 10px 0 0;
+    z-index: 100;
+}
+
+.modalWindow_hr {
+    border: 2px solid rgba(205, 207, 208, 1);
+    height: 3px;
+    border-radius: 5px;
+    min-width: 35px;
+    position: relative;
+    width: 2vw;
+    left: 50%;
+    transform: translate(-50%);
+}
\ No newline at end of file

src/components/BackdropWindow/BackdropWindow.tsx

+import style from "./BackdropWindow.module.css";
+type Props = {
+    children: React.ReactNode
+	close: () => void
+	show: boolean
+}
+
+const BackdropWindow = ({children, close, show}: Props) => {
+
+	if(!show) return
+	return (
+		<div>
+		<div className={style.modalWindow_bg} onClick={close}></div>
+		<div className={style.modalWindow_body}>
+			<div className={style.modalWindow_hr}></div>
+            {children}
+		</div>
+		</div>
+	);
+};
+
+export default BackdropWindow;

src/pages/Home/Home.tsx

-import Buttons from "@/components/UI/Buttons/GoogleAppleBtn"
+'use client'
+
+import BackdropWindow from "@/components/BackdropWindow/BackdropWindow"
+import styles from './Home.module.css'
+import { useState } from "react"
 
 const Home = () => {
+    const [filters, showFilters] = useState(false)
+    const [priceOffer, setPriceOffer] = useState(false)
+
     return (
         <>
-            <Buttons />
-            {/* <h1>Home Page</h1> */}
+        <BackdropWindow show={filters} close={() => showFilters(false)}>
+            				<p>From</p>
+                <input placeholder="Choose country" />
+                <input placeholder="Choose city" />
+                <p>To</p>
+                <input placeholder="Choose country" />
+                <input placeholder="Choose city" />
+                <p>Type of Delivery</p>
+                <input placeholder="Choose type" />
+        </BackdropWindow>
+        <BackdropWindow show={priceOffer} close={() => setPriceOffer(false)}>
+                <h3>Current Price</h3>
+                <h1>99,000 KZT</h1>
+                <p>Input your offer price</p>
+                <input placeholder="Price in KZT" />
+                <p>Input your offer price</p>
+                <input placeholder="Price in KZT" />
+        </BackdropWindow>
+        <div className={styles.container}>
+        <button onClick={() => showFilters(true)}>Filters</button>
+        <button onClick={() => setPriceOffer(true)}>Price offer</button>
+        </div>
         </>
     )
 }