menu sort list doctor

components/doctors/SortList.js

@@ -0,0 +1,53 @@
+'use client';
+import { Box, FormControl, InputLabel, MenuItem, Select, SvgIcon } from "@mui/material"
+import { useState } from "react";
+import ArrowBottomD from "../icons/ArrowBottomD";
+import SettingD from "../icons/SettingD";
+import SortD from "../icons/SortD";
+
+function SortList() {
+
+    const [age, setAge] = useState('');
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
+    return (
+        <Select
+            value={age}
+            displayEmpty
+            onChange={handleChange}
+            className="!w-[305px] !bg-[#FFF]"
+            renderValue={(value) => {
+                return (
+                    <Box sx={{ display: "flex", gap: 1 }}>
+                        <SvgIcon color="primary">
+                            <SortD />
+                        </SvgIcon>
+                        {value || 'مرتب سازی'}
+                    </Box>
+                );
+            }}
+            IconComponent={() => (
+                <div className="mx-3">
+                    <ArrowBottomD />
+                </div>
+            )}
+            sx={{
+                '& .MuiSelect-select ': {
+                    paddingRight: '12px !important'
+                },
+                '& .MuiOutlinedInput-notchedOutline ': {
+                    borderColor: '#EFEFEF !important'
+                }
+            }}
+        >
+            <MenuItem value='براساس امتیاز 1'>براساس امتیاز 1</MenuItem>
+            <MenuItem value='براساس امتیاز 2'>براساس امتیاز 2</MenuItem>
+            <MenuItem value='براساس امتیاز 3'>براساس امتیاز 3</MenuItem>
+        </Select>
+    )
+}
+
+export default SortList

components/doctors/index.js

@@ -1,7 +1,7 @@
-import { Button } from "@mui/material";
 import LocationD from "../icons/LocationD";
-import SearchBar from "./search";
 import ListDoctors from "./listDoctors";
+import SearchBar from "./search";
+import SortList from "./SortList";
 
 function DoctorsPage() {
     return (
@@ -13,7 +13,7 @@ function DoctorsPage() {
                 </div>
                 <div className="flex items-center justify-center gap-[32px]">
                     <SearchBar />
-                    <Button>تست</Button>
+                    <SortList />
                 </div>
             </div>
             <ListDoctors />

components/doctors/listDoctors/index.js

@@ -2,10 +2,6 @@ import doctors from '@/data/doctors.json'
 import ItemDoctor from './ItemDoctor';
 
 function ListDoctors() {
-
-    console.log(doctors);
-    console.log('doctors');
-
     return (
         <div>
             <ul className="grid grid-cols-3 mt-[64px] gap-[24px]">

components/icons/SortD.js

@@ -0,0 +1,11 @@
+function SortD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
+            <path d="M3.125 7H21.875" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
+            <path d="M6.25 12H18.75" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
+            <path d="M10.417 17H14.5837" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+    )
+}
+
+export default SortD