handle filter list with button

components/dashboard/userAccount/tabs/turns/Head.js

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 
 const listTab = ["نوبت های جاری", "نوبت های انجام شده"];
 
-function Head({ value, setValue, handleChange }) {
+function Head({ value, setValue, isDone, setIsDone, handleChange }) {
   return (
     <div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
       <div className="block w-full lg:hidden">
@@ -38,14 +38,26 @@ function Head({ value, setValue, handleChange }) {
         />
       </div>
       <Button
-        className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium"
+        className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
+          ${
+            isDone
+              ? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
+              : "!text-[#EFEFEF] !border-transparent"
+          }`}
+        onClick={() => setIsDone(!isDone)}
         variant="contained"
       >
         نوبت های جاری
       </Button>
       <Button
-        className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium"
-        variant="outlined"
+        className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
+          ${
+            !isDone
+              ? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
+              : "!text-[#EFEFEF] !border-transparent"
+          }`}
+        onClick={() => setIsDone(!isDone)}
+        variant="contained"
       >
         نوبت های انجام شده
       </Button>