design head and search page turns

2024-09-12 02:40:03 +03:30
parent 55e32c63ae
commit a1571bbb62
7 changed files with 120 additions and 3 deletions
@@ -0,0 +1,23 @@
+import { Button, ButtonGroup } from "@mui/material"
+
+function Date() {
+    return (
+        <ButtonGroup
+            variant="outlined"
+            className=""
+        >
+            <Button
+                className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
+            >
+                از تاریخ
+            </Button>
+            <Button
+                className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
+            >
+                تا تاریخ
+            </Button>
+        </ButtonGroup>
+    )
+}
+
+export default Date
@@ -0,0 +1,53 @@
+import ArrowBottomP from '@/components/icons/ArrowBottomP'
+import ExportP from '@/components/icons/ExportP'
+import SearchD from '@/components/icons/SearchD'
+import { Button, ButtonGroup, TextField } from '@mui/material'
+
+function SearchDoctor() {
+    return (
+        <div className="flex items-center justify-between">
+            <ButtonGroup
+                variant="contained"
+                className="!bg-[#FFF] lg:!w-[55%] !mt-[24px] !rounded-[4px] !overflow-hidden 
+            flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
+            >
+                <TextField
+                    variant="standard"
+                    InputProps={{
+                        disableUnderline: true
+                    }}
+                    sx={{
+                        background: 'transparent !important',
+                        '& .MuiInputBase-root': { height: '100%' },
+                        '& .MuiInput-root': { borderBottom: 'none', },
+                        '& .MuiInputBase-input': {
+                            background: 'transparent',
+                            color: '#7E7E7E',
+                            padding: '0'
+                        }
+                    }}
+                    placeholder='جستجو براساس نام پزشک...'
+                    dir='rtl'
+                    className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+                />
+                <Button
+                    className="
+                    !rounded-[4px] !p-[8px] !w-[56px] !h-[56px] !max-w-[40px] !max-h-[40px] 
+                "
+                >
+                    <SearchD />
+                </Button>
+            </ButtonGroup>
+            <Button
+                variant='outlined'
+                className='!border-[#5559CE] !flex !items-center !gap-[6px] !rounded-[4px]'
+            >
+                <ExportP />
+                خروجی گرفتن
+                <ArrowBottomP />
+            </Button>
+        </div>
+    )
+}
+
+export default SearchDoctor
@@ -0,0 +1,16 @@
+import Date from "./Date"
+import SearchDoctor from "./SearchDoctor"
+
+function Head() {
+    return (
+        <div className="w-full">
+            <div className="flex items-center justify-start gap-[10px]">
+                <p className="text-[#525252] text-[20px] font-bold">لیست نوبت های پزشکان</p>
+                <Date />
+            </div>
+            <SearchDoctor />
+        </div>
+    )
+}
+
+export default Head
@@ -1,6 +1,10 @@
+import Head from "./head"
+
 function TurnsPage({ data }) {
    return (
-        <div>TurnsPage</div>
+        <div className="bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] p-[24px]">
+            <Head />
+        </div>
    )
 }