Files
nobat724_front/components/home/search/Fields.js
T
2025-05-18 01:18:35 +03:30

96 lines
2.9 KiB
JavaScript

"use client";
import { useState } from "react";
import { Button, TextField } from "@mui/material";
import ModalSearchCity from "@/app/component/modalSearchCity";
import Search from "@/components/icons/Search";
import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
import Link from "next/link";
import SearchD from "@/components/icons/SearchD";
function Fields({ city, state }) {
const [open, setOpen] = useState(false);
const [data, setData] = useState({
province: state?.name || "",
city: city?.name || "",
});
return (
<>
<ModalSearchCity
open={open}
state={state}
selected={data}
setOpen={setOpen}
setSelected={setData}
>
<ButtonFilter setOpen={setOpen} selected={data} />
</ModalSearchCity>
<span className="black w-px bg-[#EFEFEF]"></span>
<TextField
variant="standard"
onChange={(e) => setData({ ...data, search: e.target.value })}
InputProps={{
disableUnderline: true,
}}
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
"& .MuiInput-root": {
padding: "0",
borderBottom: "none",
},
"& .MuiInputBase-input": {
color: "#6C757D",
},
"& .MuiInputBase-input": {
color: "#6C757D",
fontSize: {
xs: "10px !important",
sm: "12px !important",
md: "14px !important",
lg: "16px !important",
},
},
}}
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
dir="rtl"
className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
/>
<Link
href={{
pathname: "/doctors",
query: {
province: data.province,
city: data.city,
search: data.search,
},
}}
>
<Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
<div className="min-w-[20px] min-h-[20px]">
<Search />
</div>
<p>جستجو</p>
</Button>
<Button
className="!flex lg:!hidden !rounded-[4px]
!w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
!h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px]
!min-w-[40px] sm:!min-w-[42px] md:!min-w-[45px] lg:!min-w-[48px]
!min-h-[40px] sm:!min-h-[42px] md:!min-h-[45px] lg:!min-h-[48px]
!gap-2.5 !p-2.5"
>
<div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
<SearchD />
</div>
</Button>
</Link>
</>
);
}
export default Fields;