add: profile edit page

package-lock.json

@@ -25,6 +25,7 @@
         "next": "15.3.4",
         "next-usequerystate": "^1.20.0",
         "react": "^19.0.0",
+        "react-day-picker": "^9.8.0",
         "react-dom": "^19.0.0",
         "react-virtualized": "^9.22.6",
         "tailwind-merge": "^3.3.1",
@@ -80,6 +81,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
+      "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
@@ -3179,6 +3186,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -5974,6 +5997,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.8.0.tgz",
+      "integrity": "sha512-E0yhhg7R+pdgbl/2toTb0xBhsEAtmAx1l7qjIWYfcxOy8w4rTSVfbtBoSzVVhPwKP/5E9iL38LivzoE3AQDhCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "1.2.0",
+        "date-fns": "4.1.0",
+        "date-fns-jalali": "4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "next": "15.3.4",
     "next-usequerystate": "^1.20.0",
     "react": "^19.0.0",
+    "react-day-picker": "^9.8.0",
     "react-dom": "^19.0.0",
     "react-virtualized": "^9.22.6",
     "tailwind-merge": "^3.3.1",

src/app/[name]/[id]/page.tsx

@@ -18,7 +18,7 @@ function FoodPage({ }: Props) {
 
 
     return (
-        <div className='w-full'>
+        <div className='w-full -translate-y-2'>
             <div className="relative w-full rounded-2xl overflow-hidden">
                 <Image
                     className='w-full '

src/app/[name]/page.tsx

@@ -13,12 +13,11 @@ import React from "react";
 import MenuItem from "@/components/listview/MenuItem";
 import Button from "@/components/button/PrimaryButton";
 import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
-import SearchComboBox from "@/components/combobox/SearchComboBox";
-import { DropdownOption } from "@/components/combobox/Combobox";
 import { Switch } from "@/components/ui/switch";
 import { TicketPercentIcon } from "lucide-react";
 import { MedalStar } from 'iconsax-react'
 import { useQueryState } from 'next-usequerystate'
+import ComboBox, { DropdownOption } from "@/components/combobox/ComboBox";
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -239,12 +238,12 @@ const MenuIndex = () => {
 
       <AnimatedBottomSheet title="فیلتر ها" visible={filterModal} outDelay={150} onClick={toggleFilterModal}>
         <div className="ps-8.5 pe-[31px] mt-[89px]">
-          <SearchComboBox
+          <ComboBox
             title="محتویات"
             options={contents}
             selectedId={selectedContentId}
             onSelectionChange={changeSelectedContent} />
-          <SearchComboBox
+          <ComboBox
             className="relative mt-9.5"
             title="روش ارسال"
             options={shippings}

src/app/profile/edit/page.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import Button from '@/components/button/PrimaryButton';
+import { Button as ShadButton } from '@/components/ui/button';
+import ComboBox from '@/components/combobox/ComboBox';
+import InputField from '@/components/input/InputField';
+import { PORFILE_EDIT_PAGE_ELEMENT } from '@/enums';
+import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';
+// import { useProfile } from '@/hooks/auth/useProfile';
+// import { useAuthStore } from '@/zustand/authStore';
+import { Calendar2, Camera } from 'iconsax-react';
+import Image from 'next/image';
+import React, { ChangeEvent, useState } from 'react'
+import Calendar from '@/components/ui/calendar';
+import { getDateLib } from "react-day-picker/persian";
+
+type Props = object
+
+function ProfileIndex({ }: Props) {
+    const [fullname, setFullName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [dateOfBirth, setDateOfBirth] = React.useState<Date | undefined>(new Date());
+    const [selectedGender, setSelectedGender] = useState("");
+    const [showCalendar, setShowCalendar] = useState(false);
+    const dateLib = getDateLib()
+
+    const changeGender = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+        setSelectedGender(() => String(index));
+    }
+
+    // const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+    // const { mutate, data, isPending } = useProfile();
+
+    // useEffect(() => {
+    //     if (isAuthenticated) {
+    //         mutate();
+    //     }
+    //     // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [isAuthenticated])
+
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+        if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_FULLNAME) {
+            setFullName(() => e.target.value)
+        }
+        else if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_EMAIL) {
+            setEmail(() => e.target.value)
+        }
+        else if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_PHONE) {
+            setPhoneNumber(() => e.target.value)
+        }
+        // else if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_DOB) {
+        //     setDateOfBirth(() => e.target.value)
+        // }
+    }
+
+    return (
+        <>
+            <div className='relative text-center'>
+                <div className='font-medium text-sm2 leading-6'>ویرایش اطلاعات</div>
+            </div>
+
+            <div className="mt-8 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+
+                <div className="">
+                    <div className="justify-self-center w-fit relative text-center pb-10"
+                    >
+                        <button>
+                            <Image
+                                src={'/assets/images/user-avatar.png'}
+                                className='rounded-full'
+
+                                alt='user avatar'
+                                width={96}
+                                height={96}
+                            />
+                            <div
+                                className='w-24 h-24 absolute top-0 left-0 rounded-full'
+                                style={{
+                                    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 51.56%, rgba(0, 0, 0, 0.5) 100%)'
+                                }}>
+                                <Camera size={20} className='stroke-white absolute bottom-3 left-1/2 -translate-x-1/2' />
+                            </div>
+                        </button>
+                    </div>
+
+                    <div className="grid gap-6 mt-6">
+                        <InputField
+                            onChange={onChange}
+                            className=''
+                            labelText='نام و نام خانوادگی'
+                            htmlFor={PORFILE_EDIT_PAGE_ELEMENT.INPUT_FULLNAME}
+                            value={fullname}
+                        />
+                        <InputField
+                            onChange={onChange}
+                            dir='ltr'
+                            type='email'
+                            className=''
+                            labelText='ایمیل'
+                            htmlFor={PORFILE_EDIT_PAGE_ELEMENT.INPUT_EMAIL}
+                            value={email}
+                        />
+                        <InputField
+                            onChange={onChange}
+                            dir='ltr'
+                            type='number'
+                            className=''
+                            labelText='شماره همراه'
+                            htmlFor={PORFILE_EDIT_PAGE_ELEMENT.INPUT_PHONE}
+                            value={phoneNumber}
+                        />
+                        <Popover open={showCalendar} onOpenChange={setShowCalendar}>
+                            <PopoverTrigger asChild>
+                                <ShadButton
+                                    variant="outline"
+                                    id="date"
+                                    className="w-full bg-white justify-between font-normal relative h-11 rounded-normal hover:bg-white"
+                                >
+                                    {dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
+                                    <Calendar2 className='stroke-disabled2' size={24} />
+                                    <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-white px-2'>تاریخ تولد</span>
+                                </ShadButton>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto overflow-hidden p-0 z-20 box-shadow-normal rounded-lg" align="center">
+                                <Calendar
+                                    className='bg-white z-20 min-w-64 rounded-lg'
+                                    mode="single"
+                                    defaultMonth={dateOfBirth}
+                                    selected={dateOfBirth}
+                                    captionLayout="dropdown"
+                                    onSelect={(date) => {
+                                        setDateOfBirth(date)
+                                        setShowCalendar(false)
+                                    }}
+                                />
+
+                            </PopoverContent>
+                        </Popover>
+
+
+                        <div className='relative'>
+                            <ComboBox
+                                searchable={false}
+                                title=""
+                                options={[{ id: '0', title: 'آقا', label: 'آقا' }, { id: '1', title: 'خانوم', label: 'خانوم' }]}
+                                id={PORFILE_EDIT_PAGE_ELEMENT.INPUT_GENDER}
+                                selectedId={selectedGender}
+                                onSelectionChange={changeGender} />
+                            <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-white px-2'>جنسیت</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='w-full text-center mt-16 grid grid-cols-2 gap-4'>
+                    <Button>ذخیره</Button>
+                    <Button className='bg-neutral-200! text-disabled-text!'>انصراف</Button>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default ProfileIndex

src/app/profile/page.tsx

@@ -5,11 +5,13 @@ import Button from '@/components/button/PrimaryButton';
 // import { useAuthStore } from '@/zustand/authStore';
 import { ArrowLeft, Calendar2, CallCalling, Profile, Sms, Verify } from 'iconsax-react';
 import Image from 'next/image';
+import Link from 'next/link';
 import React from 'react'
 
 type Props = object
 
 function ProfileIndex({ }: Props) {
+
     // const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
 
     // const { mutate, data, isPending } = useProfile();
@@ -30,7 +32,7 @@ function ProfileIndex({ }: Props) {
                 </button>
             </div>
 
-            <div className="mt-9 rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+            <div className="mt-8 bg-white rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
 
                 <div className="">
                     <div className="flex items-center justify-start gap-4 pb-6 border-b-[1.5px] border-border">
@@ -78,7 +80,9 @@ function ProfileIndex({ }: Props) {
                 </div>
 
                 <div className='w-full text-center mt-6'>
-                    <Button>ویرایش اطلاعات</Button>
+                    <Link href={'/profile/edit'}>
+                        <Button>ویرایش اطلاعات</Button>
+                    </Link>
                 </div>
             </div>
         </>

src/components/combobox/Combobox.tsx

@@ -1,91 +1,153 @@
-"use client"
+import React, { useState, useEffect, useRef } from 'react';
-
+import ArrowDownIcon from '../icons/ArrowDownIcon';
-import * as React from "react"
+import { motion, Variants } from 'framer-motion';
-import { Check } from "lucide-react"
+import { SearchNormal } from 'iconsax-react';
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from "@/components/ui/command"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover"
-import ArrowDownIcon from "../icons/ArrowDownIcon"
 
 export interface DropdownOption {
     id: string;
-    label?: string;
     title: string;
+    label?: string;
 }
 
 type Props = {
     title: string;
     options: Array<DropdownOption>;
-    value: string;
+    expanded?: boolean;
-    setValue: React.Dispatch<React.SetStateAction<string>>
+    selectedId: string;
+    searchable?: boolean;
+    onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
 } & React.HTMLAttributes<HTMLDivElement>
 
-export function Combobox({ options, value, title, setValue, }: Props) {
+function ComboBox({ title, options, expanded, selectedId, searchable = true, onSelectionChange, ...props }: Props) {
-    const [open, setOpen] = React.useState(false)
+    const [expand, setExpand] = useState(expanded);
+    const [searchValue, setSearchValue] = useState('');
+    const boxRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+                setExpand(false);
+            }
+        };
+
+        if (expand) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [expand]);
+
+    const toggleExpand = () => {
+        setExpand((prev) => !prev);
+        setSearchValue('');
+    };
+
+    const searchChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(e.target.value);
+    };
+
+    const setSelection = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+        e.stopPropagation(); // prevent toggle
+        onSelectionChange(e, index);
+        setExpand(false);
+    };
+
+    const variants: Variants = {
+        collapse: {
+            opacity: 0,
+            scale: 0.95,
+            pointerEvents: 'none',     // disable clicks
+            transition: {
+                duration: 0.1,
+                ease: 'easeInOut'
+            }
+        },
+        expand: {
+            opacity: 1,
+            scale: 1,
+            pointerEvents: 'auto',     // re-enable clicks
+            transition: {
+                duration: 0.1,
+                ease: 'easeInOut'
+            }
+        }
+    };
+
 
     return (
-        <Popover open={open} onOpenChange={setOpen}>
+        <div ref={boxRef} className={`relative ${props.className ?? ''}`} {...props}>
-            <PopoverTrigger asChild>
+            <div
-                <Button
+                className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer"
-                    variant="outline"
+                tabIndex={0}
-                    role="combobox"
+                onClick={toggleExpand}
-                    aria-expanded={open}
+                role="combobox"
-                    className="flex font-normal w-full h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
+                aria-controls=''
+                aria-expanded={expand}
+                aria-haspopup="listbox"
+                aria-label={title}
+            >
+                <label
+                    htmlFor="content-select"
+                    className="pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]"
                 >
-                    {value
+                    <span className="relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap">
-                        ? options.find((option) => option.title === value)?.label
+                        {title}
-                        : "انتخاب کنید"}
+                    </span>
-                    <ArrowDownIcon />
+                </label>
-                    <label
+
-                        htmlFor='content-select'
+                <div className="w-full text-sm2">
-                        className='pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]'>
+                    {options.find((x) => x.id === selectedId)?.title ?? ''}
-                        <span className='relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap'>
+                </div>
-                            {title}
+
-                        </span>
+                <ArrowDownIcon data-expand={expand} className="transition-all duration-200 data-[expand=true]:rotate-x-180" />
-                    </label>
+            </div>
-                </Button>
+
-            </PopoverTrigger>
+            <motion.div
-            <PopoverContent className="w-full p-0">
+                data-expand={expand}
-                <Command>
+                aria-hidden={!expand}
-                    <CommandInput placeholder="جستجو" className="h-9" />
+                className="absolute top-full left-0 w-full mt-1 bg-white rounded-xl outline outline-solid outline-neutral-200 shadow-lg z-10"
-                    <CommandList>
+                role="listbox"
-                        <CommandEmpty>نتیجه ای یافت نشد</CommandEmpty>
+                aria-label={`${title} options`}
-                        <CommandGroup>
+                onClick={(e) => e.stopPropagation()}
-                            {options.map((option) => (
+                initial="collapse"
-                                <CommandItem
+                animate={expand ? "expand" : "collapse"}
-                                    key={option.id}
+                variants={variants}
-                                    value={option.title}
+            >
-                                    onSelect={(currentValue) => {
+
-                                        setValue(currentValue === value ? "" : currentValue)
+                {searchable &&
-                                        setOpen(false)
+                    <div className="w-full flex gap-2 border-b px-3 items-center">
-                                    }}
+                        <SearchNormal size={16} className='stroke-gray-400' />
-                                >
+                        <input
-                                    <Check
+                            placeholder="جستجو ..."
-                                        className={cn(
+                            className="w-full outline-none text-sm2 pb-2 pt-3"
-                                            "",
+                            onChange={searchChanged}
-                                            value === option.title ? "opacity-100" : "opacity-0"
+                            value={searchValue}
-                                        )}
+                        />
-                                    />
+                    </div>
-                                    {option.label}
+                }
-                                </CommandItem>
+                <div className='p-1'>
-                            ))}
+                    {options
-                        </CommandGroup>
+                        .filter((v) => v.title?.includes(searchValue))
-                    </CommandList>
+                        .map((v, i) => (
-                </Command>
+                            <div
-            </PopoverContent>
+                                onClick={(e) => setSelection(e, i)}
-        </Popover>
+                                key={v.id}
-    )
+                                data-selected={v.id === selectedId}
+                                className="flex items-center justify-end px-2 py-1.5 cursor-pointer hover:bg-gray-50 rounded-md last:rounded-b-xl"
+                                tabIndex={0}
+                                role="option"
+                                aria-selected
+                            >
+                                <span className="text-sm2 tracking-[0.13px] leading-5 w-full">{v.title}</span>
+                            </div>
+                        ))}
+                </div>
+            </motion.div>
+        </div>
+    );
 }
+
+
+export default ComboBox

src/components/combobox/SearchComboBox.tsx

@@ -1,150 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import ArrowDownIcon from '../icons/ArrowDownIcon';
-import { motion, Variants } from 'framer-motion';
-import { SearchNormal } from 'iconsax-react';
-
-export interface DropdownOption {
-    id: string;
-    title: string;
-    label?: string;
-}
-
-type Props = {
-    title: string;
-    options: Array<DropdownOption>;
-    expanded?: boolean;
-    selectedId: string;
-    onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
-} & React.HTMLAttributes<HTMLDivElement>
-
-function SearchComboBox({ title, options, expanded, selectedId, onSelectionChange, ...props }: Props) {
-    const [expand, setExpand] = useState(expanded);
-    const [searchValue, setSearchValue] = useState('');
-    const boxRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
-                setExpand(false);
-            }
-        };
-
-        if (expand) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [expand]);
-
-    const toggleExpand = () => {
-        setExpand((prev) => !prev);
-        setSearchValue('');
-    };
-
-    const searchChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearchValue(e.target.value);
-    };
-
-    const setSelection = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
-        e.stopPropagation(); // prevent toggle
-        onSelectionChange(e, index);
-        setExpand(false);
-    };
-
-    const variants: Variants = {
-        collapse: {
-            opacity: 0,
-            scale: 0.95,
-            pointerEvents: 'none',     // disable clicks
-            transition: {
-                duration: 0.1,
-                ease: 'easeInOut'
-            }
-        },
-        expand: {
-            opacity: 1,
-            scale: 1,
-            pointerEvents: 'auto',     // re-enable clicks
-            transition: {
-                duration: 0.1,
-                ease: 'easeInOut'
-            }
-        }
-    };
-
-
-    return (
-        <div ref={boxRef} className={`relative ${props.className ?? ''}`} {...props}>
-            <div
-                className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer"
-                tabIndex={0}
-                onClick={toggleExpand}
-                role="combobox"
-                aria-controls=''
-                aria-expanded={expand}
-                aria-haspopup="listbox"
-                aria-label={title}
-            >
-                <label
-                    htmlFor="content-select"
-                    className="pointer-events-none inline-flex flex-col items-end justify-center px-1 py-0 absolute -top-6 right-0 z-[2]"
-                >
-                    <span className="relative w-fit mt-[-1px] text-xs tracking-[0] leading-4 whitespace-nowrap">
-                        {title}
-                    </span>
-                </label>
-
-                <div className="w-full text-sm2">
-                    {options.find((x) => x.id === selectedId)?.title ?? ''}
-                </div>
-
-                <ArrowDownIcon data-expand={expand} className="transition-all duration-200 data-[expand=true]:rotate-x-180" />
-            </div>
-
-            <motion.div
-                data-expand={expand}
-                aria-hidden={!expand}
-                className="absolute top-full left-0 w-full mt-1 bg-white rounded-xl outline outline-solid outline-neutral-200 shadow-lg z-10"
-                role="listbox"
-                aria-label={`${title} options`}
-                onClick={(e) => e.stopPropagation()}
-                initial="collapse"
-                animate={expand ? "expand" : "collapse"}
-                variants={variants}
-            >
-
-                <div className="w-full flex gap-2 border-b px-3 items-center">
-                    <SearchNormal size={16} className='stroke-gray-400' />
-                    <input
-                        placeholder="جستجو ..."
-                        className="w-full outline-none text-sm2 pb-2 pt-3"
-                        onChange={searchChanged}
-                        value={searchValue}
-                    />
-                </div>
-                <div className='p-1'>
-                    {options
-                    .filter((v) => v.title?.includes(searchValue))
-                    .map((v, i) => (
-                        <div
-                            onClick={(e) => setSelection(e, i)}
-                            key={v.id}
-                            data-selected={v.id === selectedId}
-                            className="flex items-center justify-end px-2 py-1.5 cursor-pointer hover:bg-gray-50 rounded-md last:rounded-b-xl"
-                            tabIndex={0}
-                            role="option"
-                            aria-selected
-                        >
-                            <span className="text-sm2 tracking-[0.13px] leading-5 w-full">{v.title}</span>
-                        </div>
-                    ))}
-                </div>
-            </motion.div>
-        </div>
-    );
-}
-
-
-export default SearchComboBox

src/components/ui/calendar.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from "react"
+import {
+    ChevronDownIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, getDefaultClassNames } from "react-day-picker"
+import { DayPicker, faIR } from "react-day-picker/persian"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+export function CalendarHijri() {
+    const [date, setDate] = React.useState<Date | undefined>(
+        new Date(2025, 5, 12)
+    )
+
+    return (
+        <Calendar
+            mode="single"
+            defaultMonth={date}
+            selected={date}
+            onSelect={setDate}
+            className="rounded-lg border shadow-sm"
+        />
+    )
+}
+
+// ----------------------------------------------------------------------------
+// The code below is for this example only.
+// For your own calendar, you would edit the calendar.tsx component directly.
+// ----------------------------------------------------------------------------
+export default function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
+    components,
+    ...props
+}: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+    const defaultClassNames = getDefaultClassNames()
+
+    return (
+        <DayPicker
+            locale={faIR} 
+            numerals="arabext"
+            showOutsideDays={showOutsideDays}
+            className={cn(
+                "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+                String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+                String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+                className
+            )}
+            captionLayout={captionLayout}
+
+            classNames={{
+                root: cn("w-fit", defaultClassNames.root),
+                months: cn(
+                    "flex gap-4 flex-col md:flex-row relative",
+                    defaultClassNames.months
+                ),
+                month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+                nav: cn(
+                    "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+                    defaultClassNames.nav
+                ),
+                button_previous: cn(
+                    buttonVariants({ variant: buttonVariant }),
+                    "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+                    defaultClassNames.button_previous
+                ),
+                button_next: cn(
+                    buttonVariants({ variant: buttonVariant }),
+                    "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+                    defaultClassNames.button_next
+                ),
+                month_caption: cn(
+                    "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+                    defaultClassNames.month_caption
+                ),
+                dropdowns: cn(
+                    "w-full flex items-center text-sm font-medium justify-center px-3 h-(--cell-size) gap-1.5",
+                    defaultClassNames.dropdowns
+                ),
+                dropdown_root: cn(
+                    "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+                    defaultClassNames.dropdown_root
+                ),
+                dropdown: cn("absolute inset-0 opacity-0 ", defaultClassNames.dropdown),
+                caption_label: cn(
+                    "select-none font-medium",
+                    captionLayout === "label"
+                        ? "text-sm"
+                        : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+                    defaultClassNames.caption_label
+                ),
+                table: "w-full border-collapse",
+                weekdays: cn("flex", defaultClassNames.weekdays),
+                weekday: cn(
+                    "text-muted-foreground px-2 rounded-md flex-1 font-normal text-[0.8rem] select-none",
+                    defaultClassNames.weekday
+                ),
+                week: cn("flex w-full mt-2", defaultClassNames.week),
+                week_number_header: cn(
+                    "select-none w-(--cell-size)",
+                    defaultClassNames.week_number_header
+                ),
+                week_number: cn(
+                    "text-[0.8rem] select-none text-muted-foreground",
+                    defaultClassNames.week_number
+                ),
+                day: cn(
+                    "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+                    defaultClassNames.day
+                ),
+                range_start: cn(
+                    "rounded-l-md bg-accent",
+                    defaultClassNames.range_start
+                ),
+                range_middle: cn("rounded-none", defaultClassNames.range_middle),
+                range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+                today: cn(
+                    "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+                    defaultClassNames.today
+                ),
+                outside: cn(
+                    "text-disabled aria-selected:text-muted-foreground",
+                    defaultClassNames.outside
+                ),
+                disabled: cn(
+                    "bg-red-500 opacity-50",
+                    defaultClassNames.disabled
+                ),
+                hidden: cn("invisible", defaultClassNames.hidden),
+                ...classNames,
+            }}
+            components={{
+                Root: ({ className, rootRef, ...props }) => {
+                    return (
+                        <div
+                            data-slot="calendar"
+                            ref={rootRef}
+                            className={cn(className)}
+                            {...props}
+                        />
+                    )
+                },
+                Chevron: ({ className, orientation, ...props }) => {
+                    if (orientation === "left") {
+                        return (
+                            <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+                        )
+                    }
+
+                    if (orientation === "right") {
+                        return (
+                            <ChevronRightIcon
+                                className={cn("size-4", className)}
+                                {...props}
+                            />
+                        )
+                    }
+
+                    return (
+                        <ChevronDownIcon className={cn("size-4", className)} {...props} />
+                    )
+                },
+                DayButton: CalendarDayButton,
+                WeekNumber: ({ children, ...props }) => {
+                    return (
+                        <td {...props}>
+                            <div className="flex size-(--cell-size) items-center justify-center text-center">
+                                {children}
+                            </div>
+                        </td>
+                    )
+                },
+                ...components,
+            }}
+            {...props}
+        />
+    )
+}
+
+function CalendarDayButton({
+    className,
+    day,
+    modifiers,
+    ...props
+}: React.ComponentProps<typeof DayButton>) {
+    const defaultClassNames = getDefaultClassNames()
+
+    const ref = React.useRef<HTMLButtonElement>(null)
+    React.useEffect(() => {
+        if (modifiers.focused) ref.current?.focus()
+    }, [modifiers.focused])
+
+    return (
+        <Button
+            ref={ref}
+            variant="ghost"
+            size="icon"
+            data-day={day.date.toLocaleDateString()}
+            data-selected-single={
+                modifiers.selected &&
+                !modifiers.range_start &&
+                !modifiers.range_end &&
+                !modifiers.range_middle
+            }
+            data-range-start={modifiers.range_start}
+            data-range-end={modifiers.range_end}
+            data-range-middle={modifiers.range_middle}
+            className={cn(
+                "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+                defaultClassNames.day,
+                className
+            )}
+            {...props}
+        />
+    )
+}

src/enums/elementIds.ts

@@ -9,3 +9,11 @@ export enum AUTH_PAGE_ELEMENT {
     INPUT_OTP = "opt",
     INPUT_PHONE = "phone"
 }
+
+export enum PORFILE_EDIT_PAGE_ELEMENT {
+    INPUT_FULLNAME = 'fullname',
+    INPUT_EMAIL = 'email',
+    INPUT_PHONE = 'phone',
+    INPUT_DOB = 'dateOfBirth',
+    INPUT_GENDER = 'gender'
+}

src/enums/index.ts

@@ -1,5 +1,6 @@
 import { AUTH_STEP } from "./authStep";
-import { AUTH_PAGE_ELEMENT } from "./elementIds";
+import { AUTH_PAGE_ELEMENT, PORFILE_EDIT_PAGE_ELEMENT } from "./elementIds";
 
 export { AUTH_STEP };
 export { AUTH_PAGE_ELEMENT };
+export { PORFILE_EDIT_PAGE_ELEMENT };