fix problem
This commit is contained in:
hamid zarghami
@@ -1,260 +1,198 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
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 Seperator from '@/components/utils/Seperator';
|
||||
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, { Fragment, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { glassSurfaceCard } from '@/lib/styles/glassSurface';
|
||||
import Button from "@/components/button/PrimaryButton";
|
||||
import PasswordField from "@/components/input/PasswordField";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import Accordion from "@/components/utils/Accordion";
|
||||
import Seperator from "@/components/utils/Seperator";
|
||||
import { SmartIcon } from "@/components/utils/SmartIcon";
|
||||
import { getI18nObject } from "@/lib/i18n";
|
||||
import { glassSurfaceCard } from "@/lib/styles/glassSurface";
|
||||
import { SettingsData } from "@/types/i18n/settings";
|
||||
import { ArrowLeft, Key, TickCircle } from "iconsax-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { Fragment, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function UserSettingsIndex() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation('settings');
|
||||
const data: SettingsData = getI18nObject(t, "data");
|
||||
const [statisticalParticipation, setStatisticalParticipation] = useState(true);
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation("settings");
|
||||
const data: SettingsData = getI18nObject(t, "data");
|
||||
const [statisticalParticipation, setStatisticalParticipation] = useState(true);
|
||||
|
||||
const onSwitched = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
console.log('Save changed setting?', target.id);
|
||||
}
|
||||
const onSwitched = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
console.log("Save changed setting?", target.id);
|
||||
};
|
||||
|
||||
const handleStatisticalToggle = (checked: boolean) => {
|
||||
setStatisticalParticipation(checked);
|
||||
console.log('Statistical participation:', checked);
|
||||
}
|
||||
|
||||
|
||||
|
||||
const notifsTab = () => {
|
||||
|
||||
return (
|
||||
<section aria-labelledby="about-title" className='py-4 flex-1 h-full'>
|
||||
<section
|
||||
className={glassSurfaceCard('p-4')}>
|
||||
|
||||
<div className="flex justify-between items-center pb-[25px]">
|
||||
<h2 className='text-sm leading-5'>{data.TabNotifications.Heading}</h2>
|
||||
</div>
|
||||
|
||||
<div className='p-2 pt-0'>
|
||||
{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-container/29 rounded-xl border border-solid border-neutral-200 dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
|
||||
<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>
|
||||
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const passwordTab = () => {
|
||||
|
||||
return (
|
||||
<section aria-labelledby="reviews-title" className='py-4'>
|
||||
<section
|
||||
className={glassSurfaceCard('p-4')}>
|
||||
|
||||
<div className="flex justify-between items-center pb-[25px]">
|
||||
<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}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
{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>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const authenticatorTab = () => {
|
||||
|
||||
return (
|
||||
<section aria-labelledby="reviews-title" className='py-4'>
|
||||
<div
|
||||
className={glassSurfaceCard('p-4')}>
|
||||
|
||||
<div className="pb-4">
|
||||
<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 />
|
||||
|
||||
<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'>
|
||||
{data.TabAuthenticator.Tip}
|
||||
</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'>
|
||||
{data.TabAuthenticator.ButtonSubmit}
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
</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>
|
||||
)
|
||||
})}
|
||||
|
||||
{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>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
const handleStatisticalToggle = (checked: boolean) => {
|
||||
setStatisticalParticipation(checked);
|
||||
console.log("Statistical participation:", checked);
|
||||
};
|
||||
|
||||
const notifsTab = () => {
|
||||
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'>{data.Heading}</h1>
|
||||
<ArrowLeft
|
||||
className='cursor-pointer place-self-end'
|
||||
size='24'
|
||||
color='currentColor'
|
||||
onClick={() => { router.back() }}
|
||||
/>
|
||||
<section aria-labelledby="about-title" className="py-4 flex-1 h-full">
|
||||
<section className={glassSurfaceCard("p-4")}>
|
||||
<div className="flex justify-between items-center pb-[25px]">
|
||||
<h2 className="text-sm leading-5">{data.TabNotifications.Heading}</h2>
|
||||
</div>
|
||||
|
||||
<div className="p-2 pt-0">
|
||||
{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-container/29 rounded-xl border border-solid border-neutral-200 dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
<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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const passwordTab = () => {
|
||||
return (
|
||||
<section aria-labelledby="reviews-title" className="py-4">
|
||||
<section className={glassSurfaceCard("p-4")}>
|
||||
<div className="flex justify-between items-center pb-[25px]">
|
||||
<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} />;
|
||||
})}
|
||||
|
||||
{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>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const authenticatorTab = () => {
|
||||
return (
|
||||
<section aria-labelledby="reviews-title" className="py-4">
|
||||
<div className={glassSurfaceCard("p-4")}>
|
||||
<div className="pb-4">
|
||||
<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 />
|
||||
|
||||
<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">{data.TabAuthenticator.Tip}</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">{data.TabAuthenticator.ButtonSubmit}</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<section className={glassSurfaceCard('p-4')}>
|
||||
<div className='flex justify-between items-center pb-4'>
|
||||
<h2 className='text-sm leading-5'>{data.StatisticalParticipation.Heading}</h2>
|
||||
<Switch
|
||||
checked={statisticalParticipation}
|
||||
onCheckedChange={handleStatisticalToggle}
|
||||
id={data.StatisticalParticipation.HtmlName}
|
||||
name={data.StatisticalParticipation.HtmlName}
|
||||
className="w-12 h-6 scale-[0.9]"
|
||||
/>
|
||||
</div>
|
||||
<p className='text-xs text-disabled-text font-light'>
|
||||
{data.StatisticalParticipation.Description}
|
||||
</p>
|
||||
</section>
|
||||
{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-px text-blue-500 rounded-full">{item.Mark}</div>
|
||||
<span>{item.Label}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{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>
|
||||
)
|
||||
</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">{data.Heading}</h1>
|
||||
<ArrowLeft
|
||||
className="cursor-pointer place-self-end"
|
||||
size="24"
|
||||
color="currentColor"
|
||||
onClick={() => {
|
||||
router.back();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className={glassSurfaceCard("p-4")}>
|
||||
<div className="flex justify-between items-center pb-4">
|
||||
<h2 className="text-sm leading-5">{data.StatisticalParticipation.Heading}</h2>
|
||||
<Switch
|
||||
checked={statisticalParticipation}
|
||||
onCheckedChange={handleStatisticalToggle}
|
||||
id={data.StatisticalParticipation.HtmlName}
|
||||
name={data.StatisticalParticipation.HtmlName}
|
||||
className="w-12 h-6 scale-[0.9]"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-disabled-text font-light">{data.StatisticalParticipation.Description}</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserSettingsIndex
|
||||
export default UserSettingsIndex;
|
||||
|
||||
Reference in New Issue
Block a user