From 791e7c223a0bc9dd66eb4903453f175087b3f69c Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Tue, 25 Jun 2024 11:38:05 +0330
Subject: [PATCH] design box filter and search

---
 components/doctors/search/index.js | 33 +++++++++++++++++-------------
 components/icons/ArrowBottomD.js   |  9 ++++++++
 components/icons/SearchD.js        | 10 +++++++++
 components/icons/SettingD.js       | 16 +++++++++++++++
 4 files changed, 54 insertions(+), 14 deletions(-)
 create mode 100644 components/icons/ArrowBottomD.js
 create mode 100644 components/icons/SearchD.js
 create mode 100644 components/icons/SettingD.js

diff --git a/components/doctors/search/index.js b/components/doctors/search/index.js
index 9a68b55..4850ade 100644
--- a/components/doctors/search/index.js
+++ b/components/doctors/search/index.js
@@ -1,43 +1,48 @@
 import Search from "@/components/icons/Search";
-import Location from "@/components/icons/Location";
 import { Button, ButtonGroup, TextField } from "@mui/material";
+import SettingD from "@/components/icons/SettingD";
+import ArrowBottomD from "@/components/icons/ArrowBottomD";
+import SearchD from "@/components/icons/SearchD";
 
 function SearchBar() {
     return (
         <ButtonGroup
             variant="contained"
-            className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
+            className="!bg-[#FFF] !rounded-lg !overflow-hidden flex items-center !h-[64px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
         >
-            <Button className="!border-none" color="secondary" variant="contained">
+            <Button
+                className="!border-none !h-[64px] !px-2 !bg-[#F8F8FF]"
+                variant="contained"
+                color="secondary"
+            >
                 <div className="min-w-[20px] min-h-[20px]">
-                    <Location />
+                    <SettingD />
                 </div>
-                <p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p>
+                <p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
+                <ArrowBottomD />
             </Button>
-            <span className="black w-px h-12 bg-[#EFEFEF]"></span>
             <TextField
                 variant="standard"
                 InputProps={{
                     disableUnderline: true
                 }}
                 sx={{
+                    '& .MuiInputBase-root': {
+                        height: '100%'
+                    },
                     '& .MuiInput-root': {
-                        padding: '9px 0',
                         borderBottom: 'none',
                     },
                     '& .MuiInputBase-input': {
-                        color: '#6C757D'
+                        color: '#7E7E7E'
                     }
                 }}
                 placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
                 dir='rtl'
-                className={`!shadow-none !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+                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="!rounded-[4px] !gap-2.5">
-                <div className="min-w-[20px] min-h-[20px]">
-                    <Search />
-                </div>
-                <p>جستجو</p>
+            <Button className="!rounded-[4px] !ml-1 !w-[56px] !h-[56px] !gap-2.5 !p-4">
+                <SearchD />
             </Button>
         </ButtonGroup>
     )
diff --git a/components/icons/ArrowBottomD.js b/components/icons/ArrowBottomD.js
new file mode 100644
index 0000000..5874885
--- /dev/null
+++ b/components/icons/ArrowBottomD.js
@@ -0,0 +1,9 @@
+function ArrowBottomD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
+            <path d="M20.75 8.95L13.9583 15.47C13.1562 16.24 11.8438 16.24 11.0417 15.47L4.25 8.95" stroke="#525252" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowBottomD
\ No newline at end of file
diff --git a/components/icons/SearchD.js b/components/icons/SearchD.js
new file mode 100644
index 0000000..f1a70e9
--- /dev/null
+++ b/components/icons/SearchD.js
@@ -0,0 +1,10 @@
+function SearchD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M22 22L20 20" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default SearchD
\ No newline at end of file
diff --git a/components/icons/SettingD.js b/components/icons/SettingD.js
new file mode 100644
index 0000000..5fc5187
--- /dev/null
+++ b/components/icons/SettingD.js
@@ -0,0 +1,16 @@
+function SettingD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <g clip-path="url(#clip0_460_922)">
+                <path d="M0.625 3.52574H10.1408C10.4276 4.83117 11.5934 5.81121 12.9837 5.81121C14.374 5.81121 15.5398 4.83121 15.8266 3.52574H19.375C19.7202 3.52574 20 3.2459 20 2.90074C20 2.55558 19.7202 2.27574 19.375 2.27574H15.8263C15.5389 0.970975 14.3716 -0.00968933 12.9837 -0.00968933C11.5951 -0.00968933 10.4283 0.970819 10.1411 2.27574H0.625C0.279844 2.27574 0 2.55558 0 2.90074C0 3.2459 0.279844 3.52574 0.625 3.52574ZM11.3233 2.90238L11.3234 2.89566C11.3261 1.98289 12.0709 1.24035 12.9837 1.24035C13.8952 1.24035 14.6401 1.98187 14.644 2.89422L14.6441 2.9034C14.6427 3.81773 13.8984 4.56125 12.9837 4.56125C12.0694 4.56125 11.3254 3.81847 11.3233 2.90469L11.3233 2.90238ZM19.375 16.4742H15.8263C15.5389 15.1695 14.3716 14.1888 12.9837 14.1888C11.5951 14.1888 10.4283 15.1693 10.1411 16.4742H0.625C0.279844 16.4742 0 16.754 0 17.0992C0 17.4444 0.279844 17.7242 0.625 17.7242H10.1408C10.4276 19.0296 11.5934 20.0097 12.9837 20.0097C14.374 20.0097 15.5398 19.0296 15.8266 17.7242H19.375C19.7202 17.7242 20 17.4444 20 17.0992C20 16.754 19.7202 16.4742 19.375 16.4742ZM12.9837 18.7597C12.0694 18.7597 11.3254 18.0169 11.3233 17.1031L11.3233 17.1009L11.3234 17.0941C11.3261 16.1814 12.0709 15.4388 12.9837 15.4388C13.8952 15.4388 14.6401 16.1803 14.644 17.0926L14.6441 17.1018C14.6428 18.0162 13.8985 18.7597 12.9837 18.7597ZM19.375 9.375H9.85918C9.57238 8.06957 8.4066 7.08957 7.01629 7.08957C5.62598 7.08957 4.4602 8.06957 4.1734 9.375H0.625C0.279844 9.375 0 9.65484 0 10C0 10.3452 0.279844 10.625 0.625 10.625H4.17371C4.46109 11.9297 5.62844 12.9104 7.01629 12.9104C8.40488 12.9104 9.57172 11.9299 9.85895 10.625H19.375C19.7202 10.625 20 10.3452 20 10C20 9.65484 19.7202 9.375 19.375 9.375ZM8.67668 9.99836L8.67664 10.0051C8.67391 10.9178 7.9291 11.6604 7.01629 11.6604C6.10477 11.6604 5.35992 10.9189 5.35598 10.0066L5.35586 9.99742C5.35723 9.08297 6.10156 8.33957 7.01629 8.33957C7.93059 8.33957 8.67465 9.0823 8.67672 9.99613L8.67668 9.99836Z" fill="#525252" />
+            </g>
+            <defs>
+                <clipPath id="clip0_460_922">
+                    <rect width="20" height="20" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}
+
+export default SettingD
\ No newline at end of file