add: settings page first tab
This commit is contained in:
Mahyar Khanbolooki
@@ -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
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user