Дополнение к прошлому коммиту

parent bd5ec42a
.modalWindow_bg { .modalWindow_bg {
position: fixed; position: absolute;
z-index: 99;
background-color: rgb(0, 0, 0, 0.67); background-color: rgb(0, 0, 0, 0.67);
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -17,6 +18,8 @@ ...@@ -17,6 +18,8 @@
display: flex; display: flex;
gap: 17px; gap: 17px;
flex-direction: column; flex-direction: column;
border-radius: 10px 10px 0 0;
z-index: 100;
} }
.modalWindow_hr { .modalWindow_hr {
......
...@@ -9,11 +9,12 @@ const BackdropWindow = ({children, close, show}: Props) => { ...@@ -9,11 +9,12 @@ const BackdropWindow = ({children, close, show}: Props) => {
if(!show) return if(!show) return
return ( return (
<div className={style.modalWindow_bg} onClick={close}> <div>
<div className={style.modalWindow_body}> <div className={style.modalWindow_bg} onClick={close}></div>
<div className={style.modalWindow_hr}></div> <div className={style.modalWindow_body}>
{children} <div className={style.modalWindow_hr}></div>
</div> {children}
</div>
</div> </div>
); );
}; };
......
'use client' 'use client'
import BackdropWindow from "@/components/BackdropWindow/BackdropWindow" import BackdropWindow from "@/components/BackdropWindow/BackdropWindow"
import styles from './Home.module.css'
import { useState } from "react" import { useState } from "react"
const Home = () => { const Home = () => {
const [filters, showFilters] = useState(false) const [filters, showFilters] = useState(false)
const [priceOffer, setPriceOffer] = useState(false)
return ( return (
<> <>
<button onClick={() => showFilters(true)}>Filters</button>
<BackdropWindow show={filters} close={() => showFilters(false)}> <BackdropWindow show={filters} close={() => showFilters(false)}>
<p>From</p> <p>From</p>
<input placeholder="Choose country" /> <input placeholder="Choose country" />
...@@ -19,10 +20,7 @@ const Home = () => { ...@@ -19,10 +20,7 @@ const Home = () => {
<p>Type of Delivery</p> <p>Type of Delivery</p>
<input placeholder="Choose type" /> <input placeholder="Choose type" />
</BackdropWindow> </BackdropWindow>
<BackdropWindow show={priceOffer} close={() => setPriceOffer(false)}>
<button onClick={() => showFilters(true)}>Price offer</button>
<BackdropWindow show={filters} close={() => showFilters(false)}>
<h3>Current Price</h3> <h3>Current Price</h3>
<h1>99,000 KZT</h1> <h1>99,000 KZT</h1>
<p>Input your offer price</p> <p>Input your offer price</p>
...@@ -30,6 +28,10 @@ const Home = () => { ...@@ -30,6 +28,10 @@ const Home = () => {
<p>Input your offer price</p> <p>Input your offer price</p>
<input placeholder="Price in KZT" /> <input placeholder="Price in KZT" />
</BackdropWindow> </BackdropWindow>
<div className={styles.container}>
<button onClick={() => showFilters(true)}>Filters</button>
<button onClick={() => setPriceOffer(true)}>Price offer</button>
</div>
</> </>
) )
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment