Модальное окно полностью функционирует

src/components/modalWindow/modalWindow.module.css → src/components/BackdropWindow/BackdropWindow.module.css

-.modalWindow {
+.modalWindow_bg {
     position: fixed;
     background-color: rgb(0, 0, 0, 0.67);
     width: 100%;
@@ -13,6 +13,10 @@
     position: fixed;
     bottom: 0;
     padding-bottom: 150px;
+    padding: 8px 20px 25px 20px;
+    display: flex;
+    gap: 17px;
+    flex-direction: column;
 }
 
 .modalWindow_hr {
@@ -24,5 +28,4 @@
     width: 2vw;
     left: 50%;
     transform: translate(-50%);
-    margin: 8px 0px 28px 0;
 }
\ 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 className={style.modalWindow_bg} onClick={close}>
+			<div className={style.modalWindow_body}>
+				<div className={style.modalWindow_hr}></div>
+                {children}
+			</div>
+		</div>
+	);
+};
+
+export default BackdropWindow;

src/components/modalWindow/modalWindow.tsx

-import style from "./modalWindow.module.css";
-
-const Spinner = () => {
-	return (
-		<div className={style.modalWindow}>
-			<div className={style.modalWindow_body}>
-				<div className={style.modalWindow_hr}></div>
-				<p>Some text</p>
-                <input placeholder="some input"></input>
-			</div>
-		</div>
-	);
-};
-
-export default Spinner;

src/pages/Home/Home.tsx

+'use client'
+
+import BackdropWindow from "@/components/BackdropWindow/BackdropWindow"
+import { useState } from "react"
+
 const Home = () => {
+    const [filters, showFilters] = useState(false)
+
     return (
         <>
-        <h1>Home Page</h1></>
+        <button onClick={() => showFilters(true)}>Filters</button>
+        <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>
+        
+
+        <button onClick={() => showFilters(true)}>Price offer</button>
+        <BackdropWindow show={filters} close={() => showFilters(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>
+        </>
     )
 }
 

[Ысқақов Жәнібек]

refs to #5 (closed)