add prettier formatter to all file
This commit is contained in:
Ehsan
+30
-29
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import SearchBar from "./search";
|
||||
@@ -7,36 +7,37 @@ import ListDoctors from "./listDoctors";
|
||||
import LocationD from "../icons/LocationD";
|
||||
|
||||
function DoctorsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [data, setData] = useState({
|
||||
expertise: "",
|
||||
gender: 0,
|
||||
degree: 0,
|
||||
turn: true,
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [data, setData] = useState({
|
||||
expertise: '',
|
||||
gender: 0,
|
||||
degree: 0,
|
||||
turn: true
|
||||
});
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="pt-[95px] sm:pt-[120px] padding-responsive">
|
||||
<div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
|
||||
<div className="flex items-center justify-start gap-2 w-full">
|
||||
<LocationD />
|
||||
<p className="text-[#525252] text-[16px] font-semibold">خوزستان / اهواز</p>
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
|
||||
<SearchBar data={data} setData={setData} />
|
||||
<SortList data={data} setData={setData} />
|
||||
</div>
|
||||
</div>
|
||||
<ListDoctors loading={loading} />
|
||||
return (
|
||||
<div className="pt-[95px] sm:pt-[120px] padding-responsive">
|
||||
<div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
|
||||
<div className="flex items-center justify-start gap-2 w-full">
|
||||
<LocationD />
|
||||
<p className="text-[#525252] text-[16px] font-semibold">
|
||||
خوزستان / اهواز
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
|
||||
<SearchBar data={data} setData={setData} />
|
||||
<SortList data={data} setData={setData} />
|
||||
</div>
|
||||
</div>
|
||||
<ListDoctors loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DoctorsPage
|
||||
export default DoctorsPage;
|
||||
|
||||
@@ -1,24 +1,20 @@
|
||||
import doctors from '@/data/doctors.json'
|
||||
import Pagination from '@/app/component/Pagination';
|
||||
import ItemDoctor from '@/app/component/ItemDoctor';
|
||||
import doctors from "@/data/doctors.json";
|
||||
import Pagination from "@/app/component/Pagination";
|
||||
import ItemDoctor from "@/app/component/ItemDoctor";
|
||||
|
||||
function ListDoctors({ loading }) {
|
||||
return (
|
||||
<>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px] gap-[24px]">
|
||||
{doctors.map(doctor =>
|
||||
<ItemDoctor
|
||||
key={doctor.id}
|
||||
doctor={doctor}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
</ul>
|
||||
<div className='mt-[56px] flex justify-center'>
|
||||
<Pagination />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px] gap-[24px]">
|
||||
{doctors.map((doctor) => (
|
||||
<ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-[56px] flex justify-center">
|
||||
<Pagination />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ListDoctors
|
||||
export default ListDoctors;
|
||||
|
||||
@@ -2,59 +2,68 @@ import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import RadioContent from "./RadioContent";
|
||||
import { Switch } from "@mui/material";
|
||||
|
||||
const specialties = ['چشم پزشکی1', 'چشم پزشکی2', 'چشم پزشکی3', 'چشم پزشکی4', 'چشم پزشکی5'];
|
||||
const group1 = ['خانم', 'آقا', 'هر دو'];
|
||||
const group2 = ['فوق تخصص', 'دکترای تخصصی', 'متخصص', 'دکتری'];
|
||||
const specialties = [
|
||||
"چشم پزشکی1",
|
||||
"چشم پزشکی2",
|
||||
"چشم پزشکی3",
|
||||
"چشم پزشکی4",
|
||||
"چشم پزشکی5",
|
||||
];
|
||||
const group1 = ["خانم", "آقا", "هر دو"];
|
||||
const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];
|
||||
|
||||
const label = { inputProps: { 'aria-label': 'Switch demo' } };
|
||||
const label = { inputProps: { "aria-label": "Switch demo" } };
|
||||
|
||||
function Content({ data, setData }) {
|
||||
const changeData = (value, name) => {
|
||||
setData({ ...data, [name]: value });
|
||||
};
|
||||
|
||||
const changeData = (value, name) => {
|
||||
setData({ ...data, [name]: value })
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
|
||||
<AutoCompleteSelect
|
||||
updateData={(event) => changeData(event.target.innerText, 'expertise')}
|
||||
list={specialties}
|
||||
name='expertise'
|
||||
label='دسته بندی'
|
||||
/>
|
||||
<div className="mt-[24px]">
|
||||
<AutoCompleteSelect
|
||||
updateData={(event) => changeData(event.target.innerText, 'expertise')}
|
||||
list={specialties}
|
||||
name='expertise'
|
||||
label='تخصص'
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[40px] mb-[32px]">
|
||||
<RadioContent
|
||||
changeData={(value) => changeData(+value, 'gender')}
|
||||
value={data.gender}
|
||||
text='جنسیت پزشک'
|
||||
group={group1}
|
||||
/>
|
||||
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
|
||||
<RadioContent
|
||||
changeData={(value) => changeData(+value, 'degree')}
|
||||
value={data.degree}
|
||||
text='درجه علمی'
|
||||
group={group2}
|
||||
/>
|
||||
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<p className="text-[#3B3B3B] text-[16px] font-medium">فقط پزشکان دارای نوبت</p>
|
||||
<Switch
|
||||
{...label}
|
||||
onChange={event => changeData(event.target.checked, 'turn')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
|
||||
<AutoCompleteSelect
|
||||
updateData={(event) => changeData(event.target.innerText, "expertise")}
|
||||
list={specialties}
|
||||
name="expertise"
|
||||
label="دسته بندی"
|
||||
/>
|
||||
<div className="mt-[24px]">
|
||||
<AutoCompleteSelect
|
||||
updateData={(event) =>
|
||||
changeData(event.target.innerText, "expertise")
|
||||
}
|
||||
list={specialties}
|
||||
name="expertise"
|
||||
label="تخصص"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[40px] mb-[32px]">
|
||||
<RadioContent
|
||||
changeData={(value) => changeData(+value, "gender")}
|
||||
value={data.gender}
|
||||
text="جنسیت پزشک"
|
||||
group={group1}
|
||||
/>
|
||||
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
|
||||
<RadioContent
|
||||
changeData={(value) => changeData(+value, "degree")}
|
||||
value={data.degree}
|
||||
text="درجه علمی"
|
||||
group={group2}
|
||||
/>
|
||||
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<p className="text-[#3B3B3B] text-[16px] font-medium">
|
||||
فقط پزشکان دارای نوبت
|
||||
</p>
|
||||
<Switch
|
||||
{...label}
|
||||
onChange={(event) => changeData(event.target.checked, "turn")}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
|
||||
import { styleDefault } from "@/mui";
|
||||
@@ -7,58 +7,55 @@ import { useState } from "react";
|
||||
import Content from "./Content";
|
||||
|
||||
function FilterModal({ data, setData, children }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
<div onClick={handleOpen}>{children}</div>
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
<div onClick={handleOpen}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
className=" !overflow-hidden !max-h-[calc(100vh-16px)]"
|
||||
>
|
||||
<div
|
||||
style={styleDefault}
|
||||
className="!px-[16px] !my-[12px] overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
className=" !overflow-hidden !max-h-[calc(100vh-16px)]"
|
||||
>
|
||||
<div
|
||||
style={styleDefault}
|
||||
className="!px-[16px] !my-[12px] overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="flex justify-between w-full"
|
||||
>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
|
||||
<Button
|
||||
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
|
||||
onClick={handleClose}
|
||||
variant="text"
|
||||
>
|
||||
<CloseOrangeModal />
|
||||
<p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
|
||||
</Button>
|
||||
</div>
|
||||
<Content data={data} setData={setData} />
|
||||
</div>
|
||||
<div className="flex justify-end w-full">
|
||||
<Button
|
||||
className="!px-3 !py-2 !text-[16px] !font-medium"
|
||||
onClick={handleClose}
|
||||
variant="contained"
|
||||
>
|
||||
اعمال تغییرات
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
>
|
||||
<div>
|
||||
<div className="flex justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
|
||||
<Button
|
||||
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
|
||||
onClick={handleClose}
|
||||
variant="text"
|
||||
>
|
||||
<CloseOrangeModal />
|
||||
<p className="text-[#F17732] text-[14px] font-normal">
|
||||
حذف همه
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
<Content data={data} setData={setData} />
|
||||
</div>
|
||||
<div className="flex justify-end w-full">
|
||||
<Button
|
||||
className="!px-3 !py-2 !text-[16px] !font-medium"
|
||||
onClick={handleClose}
|
||||
variant="contained"
|
||||
>
|
||||
اعمال تغییرات
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FilterModal
|
||||
export default FilterModal;
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
import Radios from "./Radios"
|
||||
import Radios from "./Radios";
|
||||
|
||||
function RadioContent({ group, text, value, changeData }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
|
||||
<div className="mt-[16px]">
|
||||
<Radios
|
||||
changeData={changeData}
|
||||
group={group}
|
||||
value={value}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
|
||||
<div className="mt-[16px]">
|
||||
<Radios changeData={changeData} group={group} value={value} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RadioContent
|
||||
export default RadioContent;
|
||||
|
||||
@@ -1,30 +1,27 @@
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
|
||||
|
||||
function Radios({ group, value, changeData }) {
|
||||
return (
|
||||
<RadioGroup
|
||||
value={value}
|
||||
onChange={e => changeData(e.target.value)}
|
||||
sx={{
|
||||
'& .MuiFormControlLabel-root': {
|
||||
marginRight: '0 !important',
|
||||
transform: 'translateX(9px)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{group.map((item, idx) => (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Radio
|
||||
className="!ml-2" />
|
||||
}
|
||||
label={item}
|
||||
value={idx}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</RadioGroup>
|
||||
)
|
||||
return (
|
||||
<RadioGroup
|
||||
value={value}
|
||||
onChange={(e) => changeData(e.target.value)}
|
||||
sx={{
|
||||
"& .MuiFormControlLabel-root": {
|
||||
marginRight: "0 !important",
|
||||
transform: "translateX(9px)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{group.map((item, idx) => (
|
||||
<FormControlLabel
|
||||
control={<Radio className="!ml-2" />}
|
||||
label={item}
|
||||
value={idx}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</RadioGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export default Radios
|
||||
export default Radios;
|
||||
|
||||
@@ -5,61 +5,63 @@ import SearchD from "@/components/icons/SearchD";
|
||||
import FilterModal from "../modal/FilterModal";
|
||||
|
||||
function SearchBar({ data, setData }) {
|
||||
return (
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden
|
||||
return (
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden
|
||||
flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
!h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
|
||||
>
|
||||
<FilterModal data={data} setData={setData}>
|
||||
<Button
|
||||
className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<FilterModal data={data} setData={setData}>
|
||||
<Button
|
||||
className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="min-w-[20px] min-h-[20px]">
|
||||
<SettingD />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium mx-2">فیلترها</p>
|
||||
<div className="w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
</Button>
|
||||
</FilterModal>
|
||||
<TextField
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
disableUnderline: true
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
width: '100% !important',
|
||||
'& .MuiInput-root': {
|
||||
padding: '0',
|
||||
borderBottom: 'none',
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: '#6C757D',
|
||||
padding: '0px'
|
||||
}
|
||||
}}
|
||||
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
|
||||
dir='rtl'
|
||||
className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||
/>
|
||||
<Button
|
||||
className="!flex !m-1 !rounded-[4px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
|
||||
<div className="min-w-[20px] min-h-[20px]">
|
||||
<SettingD />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium mx-2">
|
||||
فیلترها
|
||||
</p>
|
||||
<div className="w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
</Button>
|
||||
</FilterModal>
|
||||
<TextField
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
width: "100% !important",
|
||||
"& .MuiInput-root": {
|
||||
padding: "0",
|
||||
borderBottom: "none",
|
||||
},
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#6C757D",
|
||||
padding: "0px",
|
||||
},
|
||||
}}
|
||||
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
|
||||
dir="rtl"
|
||||
className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||
/>
|
||||
<Button
|
||||
className="!flex !m-1 !rounded-[4px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
|
||||
!gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
|
||||
>
|
||||
<div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
|
||||
<SearchD />
|
||||
</div>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
)
|
||||
>
|
||||
<div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
|
||||
<SearchD />
|
||||
</div>
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchBar
|
||||
export default SearchBar;
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
import ArrowBottomD from "@/components/icons/ArrowBottomD"
|
||||
import SettingD from "@/components/icons/SettingD"
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowBottomD from "@/components/icons/ArrowBottomD";
|
||||
import SettingD from "@/components/icons/SettingD";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function FilterBtn() {
|
||||
return (
|
||||
<Button
|
||||
className="!flex lg:!hidden !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px] !p-2.5 !bg-transparent !shadow-none !border !border-solid !border-[#EFEFEF]"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="min-w-[20px] min-h-[20px]">
|
||||
<SettingD />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium mx-2">فیلترها</p>
|
||||
<div className="w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
return (
|
||||
<Button
|
||||
className="!flex lg:!hidden !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px] !p-2.5 !bg-transparent !shadow-none !border !border-solid !border-[#EFEFEF]"
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="min-w-[20px] min-h-[20px]">
|
||||
<SettingD />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium mx-2">
|
||||
فیلترها
|
||||
</p>
|
||||
<div className="w-[20px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default FilterBtn
|
||||
export default FilterBtn;
|
||||
|
||||
@@ -1,63 +1,59 @@
|
||||
import { MenuItem, Select, SvgIcon } from "@mui/material"
|
||||
import { MenuItem, Select, SvgIcon } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import ArrowBottomD from "../../icons/ArrowBottomD";
|
||||
import SortD from "../../icons/SortD";
|
||||
|
||||
const listSort = ['براساس امتیاز 1', 'براساس امتیاز 2', 'براساس امتیاز 3'];
|
||||
const listSort = ["براساس امتیاز 1", "براساس امتیاز 2", "براساس امتیاز 3"];
|
||||
|
||||
function SelectSort() {
|
||||
const [age, setAge] = useState("");
|
||||
|
||||
const [age, setAge] = useState('');
|
||||
const handleChange = (event) => {
|
||||
setAge(event.target.value);
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setAge(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
value={age}
|
||||
displayEmpty
|
||||
onChange={handleChange}
|
||||
className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
|
||||
renderValue={(value) => {
|
||||
return (
|
||||
<div className="w-[20px] flex gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<SvgIcon color="primary">
|
||||
<SortD />
|
||||
</SvgIcon>
|
||||
{value || 'مرتب سازی'}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
IconComponent={() => (
|
||||
<div className="mx-3 min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px]">
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
)}
|
||||
sx={{
|
||||
'& .MuiSelect-select ': {
|
||||
paddingRight: '12px !important'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline ': {
|
||||
borderColor: '#EFEFEF !important'
|
||||
},
|
||||
}}
|
||||
>
|
||||
{listSort.map((item, idx) => (
|
||||
<div key={idx} className="flex flex-col items-start w-full">
|
||||
<MenuItem
|
||||
value={item}
|
||||
className="!p-2 !mr-2 !w-[calc(100%_-_16px)]"
|
||||
>
|
||||
{item}
|
||||
</MenuItem>
|
||||
{listSort.length > idx + 1 && (
|
||||
<span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Select>
|
||||
)
|
||||
return (
|
||||
<Select
|
||||
value={age}
|
||||
displayEmpty
|
||||
onChange={handleChange}
|
||||
className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
|
||||
renderValue={(value) => {
|
||||
return (
|
||||
<div className="w-[20px] flex gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<SvgIcon color="primary">
|
||||
<SortD />
|
||||
</SvgIcon>
|
||||
{value || "مرتب سازی"}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
IconComponent={() => (
|
||||
<div className="mx-3 min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[20px] md:min-h-[22px] lg:min-h-[24px]">
|
||||
<ArrowBottomD />
|
||||
</div>
|
||||
)}
|
||||
sx={{
|
||||
"& .MuiSelect-select ": {
|
||||
paddingRight: "12px !important",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline ": {
|
||||
borderColor: "#EFEFEF !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{listSort.map((item, idx) => (
|
||||
<div key={idx} className="flex flex-col items-start w-full">
|
||||
<MenuItem value={item} className="!p-2 !mr-2 !w-[calc(100%_-_16px)]">
|
||||
{item}
|
||||
</MenuItem>
|
||||
{listSort.length > idx + 1 && (
|
||||
<span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
export default SelectSort
|
||||
export default SelectSort;
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import FilterModal from "../modal/FilterModal";
|
||||
import FilterBtn from "./FilterBtn";
|
||||
import SelectSort from "./SelectSort";
|
||||
|
||||
function SortList({ data, setData }) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center lg:!w-[25%] gap-[20px] gap-y-[12px] lg:gap-0">
|
||||
<FilterModal data={data} setData={setData}>
|
||||
<FilterBtn />
|
||||
</FilterModal>
|
||||
<SelectSort />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-wrap items-center lg:!w-[25%] gap-[20px] gap-y-[12px] lg:gap-0">
|
||||
<FilterModal data={data} setData={setData}>
|
||||
<FilterBtn />
|
||||
</FilterModal>
|
||||
<SelectSort />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SortList
|
||||
export default SortList;
|
||||
|
||||
Reference in New Issue
Block a user