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

parent bd5ec42a
.modalWindow_bg {
position: fixed;
position: absolute;
z-index: 99;
background-color: rgb(0, 0, 0, 0.67);
width: 100%;
height: 100%;
......@@ -17,6 +18,8 @@
display: flex;
gap: 17px;
flex-direction: column;
border-radius: 10px 10px 0 0;
z-index: 100;
}
.modalWindow_hr {
......
......@@ -9,7 +9,8 @@ const BackdropWindow = ({children, close, show}: Props) => {
if(!show) return
return (
<div className={style.modalWindow_bg} onClick={close}>
<div>
<div className={style.modalWindow_bg} onClick={close}></div>
<div className={style.modalWindow_body}>
<div className={style.modalWindow_hr}></div>
{children}
......
'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 (
<>
<button onClick={() => showFilters(true)}>Filters</button>
<BackdropWindow show={filters} close={() => showFilters(false)}>
<p>From</p>
<input placeholder="Choose country" />
......@@ -19,10 +20,7 @@ const Home = () => {
<p>Type of Delivery</p>
<input placeholder="Choose type" />
</BackdropWindow>
<button onClick={() => showFilters(true)}>Price offer</button>
<BackdropWindow show={filters} close={() => showFilters(false)}>
<BackdropWindow show={priceOffer} close={() => setPriceOffer(false)}>
<h3>Current Price</h3>
<h1>99,000 KZT</h1>
<p>Input your offer price</p>
......@@ -30,6 +28,10 @@ const Home = () => {
<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>
</>
)
}
......
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