add: settings page first tab

src/app/[name]/(Profile)/profile/settings/page.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet'
+import EqualizerIcon from '@/components/icons/EqualizerIcon'
+import TelegramIcon from '@/components/icons/TelegramIcon'
+import TabContainer from '@/components/tab/TabContainer'
+import { TabHeader } from '@/components/tab/TabHeader'
+import { Switch } from '@/components/ui/switch';
+import Accordion from '@/components/utils/Accordion';
+import RateBar from '@/components/utils/RateBar'
+import Seperator from '@/components/utils/Seperator';
+import useToggle from '@/hooks/helpers/useToggle';
+import clsx from 'clsx';
+import { Gallery, CallCalling, Whatsapp, Instagram, Clock, ArrowDown2, InfoCircle, Star1, Key, KeySquare, Notification1, ArrowLeft, User, MedalStar } from 'iconsax-react'
+import { useRouter } from 'next/navigation';
+import React from 'react'
+
+function UserSettingsIndex() {
+    const router = useRouter();
+
+    const firstTab = () => {
+
+        return (
+            <section aria-labelledby="about-title" className='py-4 flex-1 h-full'>
+                <section
+                    className="bg-container rounded-container shadow-container p-4">
+
+                    <div className="flex justify-between items-center pb-[25px]">
+                        <h2 className='text-sm leading-5'>تنظیمات نوتیفیکیشن</h2>
+                    </div>
+
+                    <Accordion
+                        title='حساب'
+                        group='1'
+                    >
+                        <div
+                            className="flex w-full mt-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                ورود به حساب
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+
+                        <div
+                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                تغییر رمز عبور
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+                    </Accordion>
+                    <Seperator />
+
+                    <Accordion
+                        title='کیف پول'
+                        group='1'
+                    >
+                        <div
+                            className="flex w-full mt-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                افزایش شارژ
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+
+                        <div
+                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                برداشت از کیف
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+
+                        <div
+                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                استفاده از تخفیف
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+                    </Accordion>
+                    <Seperator />
+
+                    <Accordion
+                        title='سفارش'
+                        group='1'
+                    >
+                        <div
+                            className="flex w-full mt-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                <span className='mt-0.5'>وضعیت سفارش</span>
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+
+                        <div
+                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                <span className='mt-0.5'>تحویل</span>
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+
+                        <div
+                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                        >
+                            <span className="inline-flex items-center gap-2.5 text-sm2">
+                                <MedalStar size="16" color="#333333" />
+                                <span className='mt-0.5'>کنسلی</span>
+                            </span>
+                            <Switch className="w-12 h-6 scale-[0.9]" />
+                        </div>
+                    </Accordion>
+
+                </section>
+
+            </section>
+        )
+    }
+
+    const secondTab = () => {
+
+        return (
+            <section aria-labelledby="reviews-title" className='py-4'>
+                {/* <section
+                    aria-label='امتیاز کاربران'
+                    className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+                    <div className="text-center font-bold text-5xl">
+                        4.1
+                    </div>
+                    <div className="">
+                        <RateBar className='mt-1' content='5' percentage='55' />
+                        <RateBar className='mt-1' content='4' percentage='32' />
+                        <RateBar className='mt-1' content='3' percentage='70' />
+                        <RateBar className='mt-1' content='2' percentage='12' />
+                        <RateBar className='mt-1' content='1' percentage='89' />
+                    </div>
+                </section>
+
+                <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+                    <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
+                        <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
+                        <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+                            <EqualizerIcon />
+                            <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
+                        </button>
+                    </div>
+                    <div className="">
+
+                        <article>
+                            <Comment
+                                className='pt-8'
+                                user='علیرضا عابدزاده'
+                                rating={5.0}
+                                date='18 آذر 1401'
+                                text='لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است'
+                                tags={['پیتزا قارچ مخصوص', 'چیز برگر ژیوان']}
+                            />
+                        </article>
+
+                    </div>
+                </section>
+                <AnimatedBottomSheet title="مرتب کردن بر اساس" visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
+                    <div className="px-8.5 py-10 justify-between">
+                        {sortings.map((v, i) => {
+                            return (
+                                <div key={i}>
+                                    <div onClick={() => changeSorting(i)} className="text-sm2 font-medium cursor-pointer">
+                                        {v}
+                                    </div>
+                                    {i < sortings.length - 1 && <hr className="text-white/40 mb-4 mt-4" />}
+                                </div>
+                            )
+                        })}
+                    </div>
+                </AnimatedBottomSheet> */}
+            </section>
+        )
+    }
+
+    return (
+        <div className='overflow-y-auto h-full noscrollbar flex flex-col gap-6'>
+            <div className='grid grid-cols-3 items-center'>
+                <span></span>
+                <h1 className='text-sm2 place-self-center font-medium'>تنظیمات</h1>
+                <ArrowLeft
+                    className='cursor-pointer place-self-end'
+                    size='24'
+                    color='currentColor'
+                    onClick={() => { router.back() }}
+                />
+            </div>
+            <TabContainer>
+                <TabHeader
+                    viewRenderer={firstTab()}
+                    title='نوتیفیکیشن'
+                    icon={<Notification1 size={24} />}
+                />
+                <TabHeader
+                    viewRenderer={secondTab()}
+                    title='رمز عبور'
+                    icon={<KeySquare size={24} />}
+                />
+                <TabHeader
+                    viewRenderer={secondTab()}
+                    title='دو مرحله ای'
+                    icon={<Key size={24} />}
+                />
+            </TabContainer>
+        </div>
+    )
+}
+
+export default UserSettingsIndex

src/components/ui/switch.tsx

@@ -14,7 +14,7 @@ function Switch({
       dir="ltr"
       data-slot="switch"
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-6 w-12 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-6 w-12 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}