add: settings page locales
This commit is contained in:
Mahyar Khanbolooki
@@ -7,12 +7,23 @@ import { TabHeader } from '@/components/tab/TabHeader'
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import Accordion from '@/components/utils/Accordion';
|
||||
import Seperator from '@/components/utils/Seperator';
|
||||
import { Key, KeySquare, Notification1, ArrowLeft, MedalStar, TickCircle } from 'iconsax-react'
|
||||
import { SmartIcon } from '@/components/utils/SmartIcon';
|
||||
import { getI18nObject } from '@/lib/i18n';
|
||||
import { SettingsData } from '@/types/i18n/settings';
|
||||
import { Key, KeySquare, Notification1, ArrowLeft, TickCircle } from 'iconsax-react'
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React from 'react'
|
||||
import React, { Fragment } from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
function UserSettingsIndex() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation('settings');
|
||||
const data: SettingsData = getI18nObject(t, "data");
|
||||
|
||||
const onSwitched = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
console.log('Save changed setting?', target.id);
|
||||
}
|
||||
|
||||
const notifsTab = () => {
|
||||
|
||||
@@ -22,106 +33,46 @@ function UserSettingsIndex() {
|
||||
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>
|
||||
<h2 className='text-sm leading-5'>{data.TabNotifications.Heading}</h2>
|
||||
</div>
|
||||
|
||||
<div className='p-2 pt-0'>
|
||||
<Accordion
|
||||
title='حساب'
|
||||
group='1'
|
||||
>
|
||||
<div
|
||||
className="flex 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 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>
|
||||
{data.TabNotifications.Accordions.map((accordion, i) => {
|
||||
return (
|
||||
<Fragment key={i}>
|
||||
<Accordion
|
||||
title={accordion.Heading}
|
||||
group={'accordions'}
|
||||
icon={accordion.Icon}
|
||||
>
|
||||
<div className='grid gap-4 mb-3'>
|
||||
{accordion.Items.map((item, j) => {
|
||||
return (
|
||||
<label
|
||||
key={j}
|
||||
htmlFor={item.HtmlName}
|
||||
className="flex 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 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
|
||||
<div
|
||||
className="flex w-full my-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>
|
||||
</Accordion>
|
||||
<Seperator />
|
||||
|
||||
<Accordion
|
||||
title='کیف پول'
|
||||
group='1'
|
||||
>
|
||||
<div
|
||||
className="flex 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 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 my-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 my-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>
|
||||
</Accordion>
|
||||
<Seperator />
|
||||
|
||||
<Accordion
|
||||
title='سفارش'
|
||||
group='1'
|
||||
>
|
||||
<div
|
||||
className="flex 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 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 my-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 my-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>
|
||||
</Accordion>
|
||||
<span className="inline-flex items-center gap-2.5 text-sm2">
|
||||
<SmartIcon icon={item.Icon} />
|
||||
{item.Label}
|
||||
</span>
|
||||
<Switch
|
||||
onClick={onSwitched}
|
||||
id={item.HtmlName}
|
||||
name={item.HtmlName}
|
||||
className="w-12 h-6 scale-[0.9]"
|
||||
/>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Accordion>
|
||||
<Seperator className='last:hidden' />
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -138,45 +89,49 @@ function UserSettingsIndex() {
|
||||
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>
|
||||
<h2 className='text-sm leading-5'>{data.TabPassword.Heading}</h2>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
className='grid gap-6 p-2'
|
||||
>
|
||||
{data.TabPassword.Inputs.map((input, i) => {
|
||||
return (
|
||||
<PasswordField
|
||||
labelText={input.Label}
|
||||
className='bg-container'
|
||||
key={i}
|
||||
htmlFor={input.HtmlName ?? ''}
|
||||
placeholder={input.Placeholder}
|
||||
autoComplete={input.AutoComplete}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
<PasswordField
|
||||
htmlFor='oldPassword'
|
||||
placeholder='رمز عبور فعلی'
|
||||
autoComplete='current-password'
|
||||
/>
|
||||
}
|
||||
|
||||
<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>
|
||||
{data.TabPassword.Rules.map((rule, i) => {
|
||||
return (
|
||||
<section
|
||||
key={i}
|
||||
className='bg-background rounded-normal p-4 text-xs flex flex-col gap-2 font-light'
|
||||
>
|
||||
<h6 className='text-sm mb-2'>{rule.Heading}</h6>
|
||||
{rule.Items.map((item, i) => {
|
||||
return (
|
||||
<li key={i}>{item}</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'>
|
||||
ذخیره تغییرات
|
||||
{data.TabPassword.ButtonSubmit}
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
@@ -194,8 +149,8 @@ function UserSettingsIndex() {
|
||||
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>
|
||||
<h2 className='text-sm leading-5'>{data.TabAuthenticator.Heading}</h2>
|
||||
<p className='text-xs mt-3 text-disabled-text font-light'>{data.TabAuthenticator.Description}</p>
|
||||
</div>
|
||||
|
||||
<Seperator />
|
||||
@@ -205,7 +160,7 @@ function UserSettingsIndex() {
|
||||
<Key size={32} className='stroke-blue-500' />
|
||||
</div>
|
||||
<p className='text-sm2 mt-4 font-light place-self-center'>
|
||||
برای شروع فرآیند راهاندازی احراز هویت دو مرحلهای، روی دکمه زیر کلیک کنید
|
||||
{data.TabAuthenticator.Tip}
|
||||
</p>
|
||||
|
||||
<div className='place-self-center mt-2'>
|
||||
@@ -213,44 +168,46 @@ function UserSettingsIndex() {
|
||||
<div className='flex items-center justify-center gap-1'>
|
||||
<TickCircle className='stroke-white' size={20} />
|
||||
<span className='mt-0.5'>
|
||||
ذخیره تغییرات
|
||||
{data.TabAuthenticator.ButtonSubmit}
|
||||
</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>
|
||||
{data.TabAuthenticator.Guides.map((guide, i) => {
|
||||
return (
|
||||
<section
|
||||
key={i}
|
||||
className='bg-background rounded-normal mt-14 p-4 text-xs flex flex-col gap-2 font-light'
|
||||
>
|
||||
<h6 className='text-sm'>{guide.Heading}</h6>
|
||||
<p className='text-disabled-text'>{guide.Description}</p>
|
||||
{guide.Items.map((item, i) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
<div className='ml-2 mt-2 bg-blue-100 inline-block size-6 text-center pt-[5px] pr-[1px] text-blue-500 rounded-full'>
|
||||
{item.Mark}
|
||||
</div>
|
||||
<span>
|
||||
{item.Label}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className='mt-4 p-3 text-yellow-800 rounded-lg bg-yellow-50 border border-solid border-yellow-200'>
|
||||
توجه: کد های پشتیبان خود را در مکانی امن نگهداری کنید
|
||||
</div>
|
||||
</section>
|
||||
{guide.Notes.map((note, i) => {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className='mt-4 p-3 text-yellow-800 rounded-lg bg-yellow-50 border border-solid border-yellow-200'
|
||||
>
|
||||
{note}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</section>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -262,7 +219,7 @@ function UserSettingsIndex() {
|
||||
<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>
|
||||
<h1 className='text-sm2 place-self-center font-medium'>{data.Heading}</h1>
|
||||
<ArrowLeft
|
||||
className='cursor-pointer place-self-end'
|
||||
size='24'
|
||||
@@ -273,17 +230,17 @@ function UserSettingsIndex() {
|
||||
<TabContainer>
|
||||
<TabHeader
|
||||
viewRenderer={notifsTab()}
|
||||
title='نوتیفیکیشن'
|
||||
title={data.TabNotifications.Title}
|
||||
icon={<Notification1 size={24} />}
|
||||
/>
|
||||
<TabHeader
|
||||
viewRenderer={passwordTab()}
|
||||
title='رمز عبور'
|
||||
title={data.TabPassword.Title}
|
||||
icon={<KeySquare size={24} />}
|
||||
/>
|
||||
<TabHeader
|
||||
viewRenderer={authenticatorTab()}
|
||||
title='دو مرحله ای'
|
||||
title={data.TabAuthenticator.Title}
|
||||
icon={<Key size={24} />}
|
||||
/>
|
||||
</TabContainer>
|
||||
|
||||
+1
-1
@@ -16,7 +16,7 @@ export const viewport: Viewport = {
|
||||
themeColor: '#F4F5F9',
|
||||
}
|
||||
|
||||
const i18nNamespaces = ['common', 'menu', 'orders', 'auth', "rating", "chat", "notifications", 'parallels'];
|
||||
const i18nNamespaces = ['settings', 'common', 'menu', 'orders', 'auth', "rating", "chat", "notifications", 'parallels'];
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
|
||||
Reference in New Issue
Block a user