add: settings page
This commit is contained in:
Mahyar Khanbolooki
@@ -1,24 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet'
|
||||
import EqualizerIcon from '@/components/icons/EqualizerIcon'
|
||||
import TelegramIcon from '@/components/icons/TelegramIcon'
|
||||
import Button from '@/components/button/PrimaryButton';
|
||||
import PasswordField from '@/components/input/PasswordField';
|
||||
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 { Key, KeySquare, Notification1, ArrowLeft, MedalStar, TickCircle } from 'iconsax-react'
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React from 'react'
|
||||
|
||||
function UserSettingsIndex() {
|
||||
const router = useRouter();
|
||||
|
||||
const firstTab = () => {
|
||||
const notifsTab = () => {
|
||||
|
||||
return (
|
||||
<section aria-labelledby="about-title" className='py-4 flex-1 h-full'>
|
||||
@@ -29,6 +25,7 @@ function UserSettingsIndex() {
|
||||
<h2 className='text-sm leading-5'>تنظیمات نوتیفیکیشن</h2>
|
||||
</div>
|
||||
|
||||
<div className='p-2 pt-0'>
|
||||
<Accordion
|
||||
title='حساب'
|
||||
group='1'
|
||||
@@ -125,6 +122,7 @@ function UserSettingsIndex() {
|
||||
<Switch className="w-12 h-6 scale-[0.9]" />
|
||||
</div>
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -132,62 +130,130 @@ function UserSettingsIndex() {
|
||||
)
|
||||
}
|
||||
|
||||
const secondTab = () => {
|
||||
const passwordTab = () => {
|
||||
|
||||
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 p-4">
|
||||
|
||||
<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 className="flex justify-between items-center pb-[25px]">
|
||||
<h2 className='text-sm leading-5'>تغییر رمز عبور</h2>
|
||||
</div>
|
||||
<div className="">
|
||||
|
||||
<article>
|
||||
<Comment
|
||||
className='pt-8'
|
||||
user='علیرضا عابدزاده'
|
||||
rating={5.0}
|
||||
date='18 آذر 1401'
|
||||
text='لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است'
|
||||
tags={['پیتزا قارچ مخصوص', 'چیز برگر ژیوان']}
|
||||
<form
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
className='grid gap-6 p-2'
|
||||
>
|
||||
|
||||
<PasswordField
|
||||
htmlFor='oldPassword'
|
||||
placeholder='رمز عبور فعلی'
|
||||
autoComplete='current-password'
|
||||
/>
|
||||
</article>
|
||||
|
||||
<PasswordField
|
||||
htmlFor='newPassowrd'
|
||||
placeholder='رمز عبور جدید'
|
||||
autoComplete='new-password'
|
||||
/>
|
||||
|
||||
<PasswordField
|
||||
htmlFor='passwordRepeat'
|
||||
placeholder='تکرار رمز عبور'
|
||||
autoComplete='new-password'
|
||||
/>
|
||||
|
||||
<section className='bg-background rounded-normal p-4 text-xs flex flex-col gap-2 font-light'>
|
||||
<h6 className='text-sm'>رمز عبور میبایست:</h6>
|
||||
<li className='mt-2'>حداقل 8 کاراکتر باشد</li>
|
||||
<li>ترکیبی از حروف موچک و بزرگ باشد</li>
|
||||
<li>شامل اعداد باشد</li>
|
||||
<li>شامل کاراکتر های خاص (نماد ها) باشد</li>
|
||||
</section>
|
||||
|
||||
<Button className='mt-4'>
|
||||
<div className='flex items-center justify-center gap-1'>
|
||||
<TickCircle className='stroke-white' size={20} />
|
||||
<span className='mt-0.5'>
|
||||
ذخیره تغییرات
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const authenticatorTab = () => {
|
||||
|
||||
return (
|
||||
<section aria-labelledby="reviews-title" className='py-4'>
|
||||
<div
|
||||
className="bg-container rounded-container shadow-container p-4">
|
||||
|
||||
<div className="pb-4">
|
||||
<h2 className='text-sm leading-5'>راهاندازی احراز هویت دو مرحلهای</h2>
|
||||
<p className='text-xs mt-3 text-disabled-text font-light'>احراز هویت دو مرحلهای امنیت اکانت شما را افزایش میدهد</p>
|
||||
</div>
|
||||
|
||||
<Seperator />
|
||||
|
||||
<div className='p-2'>
|
||||
<div className='mt-14 bg-blue-100 p-4 place-self-center rounded-full'>
|
||||
<Key size={32} className='stroke-blue-500' />
|
||||
</div>
|
||||
<p className='text-sm2 mt-4 font-light place-self-center'>
|
||||
برای شروع فرآیند راهاندازی احراز هویت دو مرحلهای، روی دکمه زیر کلیک کنید
|
||||
</p>
|
||||
|
||||
<div className='place-self-center mt-2'>
|
||||
<Button className='mt-4 px-14 py-2'>
|
||||
<div className='flex items-center justify-center gap-1'>
|
||||
<TickCircle className='stroke-white' size={20} />
|
||||
<span className='mt-0.5'>
|
||||
ذخیره تغییرات
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<section className='bg-background rounded-normal mt-14 p-4 text-xs flex flex-col gap-2 font-light'>
|
||||
<h6 className='text-sm'>راهنمای احراز هویت دو مرحلهای</h6>
|
||||
<p className='text-disabled-text'>این قابلیت امنیت حساب شما را به شدت افزایش میدهد</p>
|
||||
<div>
|
||||
<div className='ml-2 mt-2 bg-blue-100 inline-block size-6 text-center pt-[5px] pr-[1px] text-blue-500 rounded-full'>
|
||||
1
|
||||
</div>
|
||||
<span>
|
||||
یک برنامه Authenticator مانند Google Authenticator نصب کنید
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className='ml-2 mt-2 bg-blue-100 inline-block size-6 text-center pt-[5px] pr-[1px] text-blue-500 rounded-full'>
|
||||
2
|
||||
</div>
|
||||
<span>
|
||||
QR Code را اسکن کنید یا کد را به صورت دستی وارد کنید
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className='ml-2 mt-2 bg-blue-100 inline-block size-6 text-center pt-[5px] pr-[1px] text-blue-500 rounded-full'>
|
||||
3
|
||||
</div>
|
||||
<span>
|
||||
کد 6 رقمی تولید شده توسط برنامه را وارد کنید
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 p-3 text-yellow-800 rounded-lg bg-yellow-50 border border-solid border-yellow-200'>
|
||||
توجه: کد های پشتیبان خود را در مکانی امن نگهداری کنید
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@@ -206,17 +272,17 @@ function UserSettingsIndex() {
|
||||
</div>
|
||||
<TabContainer>
|
||||
<TabHeader
|
||||
viewRenderer={firstTab()}
|
||||
viewRenderer={notifsTab()}
|
||||
title='نوتیفیکیشن'
|
||||
icon={<Notification1 size={24} />}
|
||||
/>
|
||||
<TabHeader
|
||||
viewRenderer={secondTab()}
|
||||
viewRenderer={passwordTab()}
|
||||
title='رمز عبور'
|
||||
icon={<KeySquare size={24} />}
|
||||
/>
|
||||
<TabHeader
|
||||
viewRenderer={secondTab()}
|
||||
viewRenderer={authenticatorTab()}
|
||||
title='دو مرحله ای'
|
||||
icon={<Key size={24} />}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user