modal page home set state

2024-06-25 11:21:17 +03:30
parent 2017cc2e5a
commit 4c0d308302
12 changed files with 214 additions and 27 deletions
@@ -0,0 +1,50 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AutoCompleteSelect({ list, updateData, label }) {
+    return (
+        <Autocomplete
+            disablePortal
+            options={list}
+            className="!rounded-lg !w-[344px]"
+            onChange={(event) => updateData && updateData(event)}
+            sx={{
+                ...styleTextSelectRight,
+                // Hide Icon Number
+                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+                    display: 'none'
+                },
+                '& input[type=number]': {
+                    MozAppearance: 'textfield'
+                },
+                '& .MuiInputBase-root': {
+                    borderRadius: 2,
+                    padding: '5px 16px !important'
+                }
+            }}
+            renderInput={(params) =>
+                <TextField
+                    fullWidth
+                    {...params}
+                    InputProps={{
+                        ...params.InputProps,
+                        endAdornment: (
+                            <div
+                                className="absolute left-4"
+                            >
+                                <BottomSelect />
+                            </div>
+                        )
+                    }}
+                    placeholder={label}
+                    sx={{
+                        borderRadius: '8px',
+                    }}
+                />
+            }
+        />
+    )
+}
+
+export default AutoCompleteSelect
@@ -1,4 +1,5 @@
 import { TextField } from "@mui/material"
+import { styleTextSelectRight } from "@/mui"

 function Field({ title, type, isPlaceHolder }) {
    return (
@@ -7,22 +8,7 @@ function Field({ title, type, isPlaceHolder }) {
            type={type || 'text'}
            className="!w-full !mx-auto !bg-[#FFF]"
            sx={{
-                '& .mui-fxnuf-MuiFormLabel-root-MuiInputLabel-root': {
-                    right: '30px'
-                },
-                '& .mui-18r6uqa-MuiFormLabel-root-MuiInputLabel-root': {
-                    right: '0',
-                    left: 'auto',
-                    background: '#FFF',
-                    padding: '0 10px'
-                },
-                '& .mui-14lo706': {
-                    display: 'none'
-                },
-                '& .MuiFormLabel-root': {
-                    top: '-4px !important'
-                },
-
+                ...styleTextSelectRight,
                // Hide Icon Number
                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
                    display: 'none'
@@ -6,7 +6,7 @@ import { useState } from 'react';

 function SignIn() {

-    const [isSendMsg, setIsSendMsg] = useState(true);
+    const [isSendMsg, setIsSendMsg] = useState(false);

    return (
        <div>
@@ -22,7 +22,7 @@ const theme = createTheme({
    },
    palette: {
        primary: {
-            main: "#526CAC",
+            main: "#5559CE",
            contrastText: "#EFEFEF",
        },
        secondary: {
@@ -1,6 +1,8 @@
 import Search from "@/components/icons/Search";
 import Location from "@/components/icons/Location";
 import { Button, ButtonGroup, TextField } from "@mui/material";
+import ArrowBottomH from "@/components/icons/ArrowBottomH";
+import ModalSearchCity from "./modal";

 function SearchBar() {
    return (
@@ -8,12 +10,7 @@ function SearchBar() {
            variant="contained"
            className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
        >
-            <Button className="!border-none" color="secondary" variant="contained">
-                <div className="min-w-[20px] min-h-[20px]">
-                    <Location />
-                </div>
-                <p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p>
-            </Button>
+            <ModalSearchCity />
            <span className="black w-px h-12 bg-[#EFEFEF]"></span>
            <TextField
                variant="standard"
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { Box, Button, Modal } from "@mui/material";
+
+// Icon
+import ArrowBottomH from "@/components/icons/ArrowBottomH";
+import Location from "@/components/icons/Location";
+import { styleDefault } from "@/mui";
+import CloseModalD from "@/components/icons/CloseModalD";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import ArrowLeftM from "@/components/icons/ArrowLeftM";
+
+function ModalSearchCity() {
+
+    const states = [
+        { label: 'تهران', id: 10 },
+        { label: 'اصفهان', id: 20 },
+        { label: 'مازندران', id: 30 }
+    ];
+
+    const cities = [
+        { label: 'شهر یک', id: 10 },
+        { label: 'شهر دو', id: 20 },
+        { label: 'شهر سه', id: 30 }
+    ];
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <div>
+            {/* Button Modal */}
+            <Button
+                className="!border-none hover:!bg-transparent"
+                onClick={handleOpen}
+                variant="contained"
+                color="secondary"
+            >
+                <div className="min-w-[20px] min-h-[20px]">
+                    <Location />
+                </div>
+                <p className="text-[#616161] text-[16px] font-medium mx-1">انتخاب شهر</p>
+                <ArrowBottomH />
+            </Button>
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <Box sx={styleDefault}>
+                    <div
+                        className="flex justify-end w-full"
+                    >
+                        <div className="cursor-pointer" onClick={handleClose}>
+                            <CloseModalD />
+                        </div>
+                    </div>
+                    <div className="px-2">
+                        <p className="text-[#525252] mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
+                        <div className="flex flex-col mt-8 mb-14 justify-center items-center gap-10">
+                            <AutoCompleteSelect
+                                list={states}
+                                label='استان'
+                            />
+                            <AutoCompleteSelect
+                                list={cities}
+                                label='شهر'
+                            />
+                        </div>
+                        <div className="w-full flex justify-end">
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                className="flex !px-3 items-center justify-center gap-1 mr-auto"
+                            >
+                                تایید و ادامه
+                                <ArrowLeftM />
+                            </Button>
+                        </div>
+                    </div>
+                </Box>
+            </Modal>
+        </div>
+    )
+}
+
+export default ModalSearchCity
@@ -0,0 +1,9 @@
+function ArrowBottomH() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none">
+            <path d="M14.6 1.45834L9.16669 6.89167C8.52502 7.53334 7.47503 7.53334 6.83336 6.89167L1.40002 1.45834" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowBottomH
@@ -0,0 +1,10 @@
+function ArrowLeftM() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M7.97508 4.94168L2.91675 10L7.97508 15.0583" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.0834 10H3.05835" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowLeftM
@@ -0,0 +1,9 @@
+function BottomSelect() {
+    return (
+        <svg className="cursor-pointer" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M19.9181 8.95L13.3981 15.47C12.6281 16.24 11.3681 16.24 10.5981 15.47L4.07812 8.95" stroke="#495057" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default BottomSelect;
@@ -0,0 +1,9 @@
+function CloseModalD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+            <path d="M12.5947 4.20135C12.533 4.13954 12.4597 4.09051 12.3791 4.05706C12.2984 4.0236 12.212 4.00638 12.1247 4.00638C12.0374 4.00638 11.9509 4.0236 11.8703 4.05706C11.7896 4.09051 11.7164 4.13954 11.6547 4.20135L8.39468 7.45468L5.13468 4.19468C5.07296 4.13296 4.99969 4.084 4.91904 4.0506C4.8384 4.01719 4.75197 4 4.66468 4C4.57739 4 4.49096 4.01719 4.41032 4.0506C4.32968 4.084 4.2564 4.13296 4.19468 4.19468C4.13296 4.2564 4.084 4.32968 4.0506 4.41032C4.01719 4.49096 4 4.57739 4 4.66468C4 4.75197 4.01719 4.8384 4.0506 4.91904C4.084 4.99969 4.13296 5.07296 4.19468 5.13468L7.45468 8.39468L4.19468 11.6547C4.13296 11.7164 4.084 11.7897 4.0506 11.8703C4.01719 11.951 4 12.0374 4 12.1247C4 12.212 4.01719 12.2984 4.0506 12.379C4.084 12.4597 4.13296 12.533 4.19468 12.5947C4.2564 12.6564 4.32968 12.7054 4.41032 12.7388C4.49096 12.7722 4.57739 12.7894 4.66468 12.7894C4.75197 12.7894 4.8384 12.7722 4.91904 12.7388C4.99969 12.7054 5.07296 12.6564 5.13468 12.5947L8.39468 9.33468L11.6547 12.5947C11.7164 12.6564 11.7897 12.7054 11.8703 12.7388C11.951 12.7722 12.0374 12.7894 12.1247 12.7894C12.212 12.7894 12.2984 12.7722 12.379 12.7388C12.4597 12.7054 12.533 12.6564 12.5947 12.5947C12.6564 12.533 12.7054 12.4597 12.7388 12.379C12.7722 12.2984 12.7894 12.212 12.7894 12.1247C12.7894 12.0374 12.7722 11.951 12.7388 11.8703C12.7054 11.7897 12.6564 11.7164 12.5947 11.6547L9.33468 8.39468L12.5947 5.13468C12.848 4.88135 12.848 4.45468 12.5947 4.20135Z" fill="#7E7E7E" />
+        </svg>
+    )
+}
+
+export default CloseModalD
@@ -35,9 +35,11 @@ function Header() {
                        </li>
                    ))}
                </ul>
-                <Button variant="outlined" color="primary">
-                    ورود | ثبت نام
-                </Button>
+                <Link href='/signin'>
+                    <Button variant="outlined" color="primary">
+                        ورود | ثبت نام
+                    </Button>
+                </Link>
            </div>
        </div>
    )
@@ -0,0 +1,28 @@
+export const styleDefault = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 'fit-content',
+    bgcolor: '#FFF',
+    borderRadius: 2,
+    p: 2,
+};
+
+export const styleTextSelectRight = {
+    '& .mui-fxnuf-MuiFormLabel-root-MuiInputLabel-root': {
+        right: '30px'
+    },
+    '& .mui-18r6uqa-MuiFormLabel-root-MuiInputLabel-root': {
+        right: '0',
+        left: 'auto',
+        background: '#FFF',
+        padding: '0 10px'
+    },
+    '& .mui-14lo706': {
+        display: 'none'
+    },
+    '& .MuiFormLabel-root': {
+        top: '-4px !important'
+    }
+}