deign sidebar

components/doctors/sortlist/SelectSort.js

@@ -3,18 +3,25 @@ import { useState } from "react";
 import ArrowBottomD from "../../icons/ArrowBottomD";
 import SortD from "../../icons/SortD";
 
-const listSort = ["براساس امتیاز 1", "براساس امتیاز 2", "براساس امتیاز 3"];
+const listSort = [
+  { label: "براساس امتیاز 1", id: 10 },
+  { label: "براساس امتیاز 2", id: 20 },
+  { label: "براساس امتیاز 3", id: 30 },
+];
 
 function SelectSort() {
-  const [age, setAge] = useState("");
+  const [sort, setSort] = useState("");
+  console.log(sort);
 
   const handleChange = (event) => {
-    setAge(event.target.value);
+    console.log(event);
+
+    setSort(event.target.name);
   };
 
   return (
     <Select
-      value={age}
+      defaultValue={sort}
       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]"
@@ -43,14 +50,19 @@ function SelectSort() {
       }}
     >
       {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 && (
+        <MenuItem
+          key={idx}
+          value={item.label}
+          name={item.label}
+          className="!flex !flex-col !items-start !w-full hover:!bg-transparent"
+        >
+          <div value={item.id} className="!p-2 !mr-2 !w-[calc(100%_-_16px)]">
+            {item.label}
+          </div>
+          {/* {listSort.length > idx + 1 && (
             <span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
-          )}
-        </div>
+          )} */}
+        </MenuItem>
       ))}
     </Select>
   );