setting

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

@@ -12,19 +12,27 @@ 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 } from 'react'
+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 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 (
@@ -227,23 +235,23 @@ function UserSettingsIndex() {
                     onClick={() => { router.back() }}
                 />
             </div>
-            <TabContainer>
-                <TabHeader
-                    viewRenderer={notifsTab()}
-                    title={data.TabNotifications.Title}
-                    icon={<Notification1 size={24} />}
-                />
-                <TabHeader
-                    viewRenderer={passwordTab()}
-                    title={data.TabPassword.Title}
-                    icon={<KeySquare size={24} />}
-                />
-                <TabHeader
-                    viewRenderer={authenticatorTab()}
-                    title={data.TabAuthenticator.Title}
-                    icon={<Key size={24} />}
-                />
-            </TabContainer>
+
+            <section className='bg-container rounded-container shadow-container 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>
     )
 }

src/locales/fa/settings.json

@@ -121,6 +121,11 @@
                 }
             ],
             "ButtonSubmit": "راه‌اندازی کد دو مرحله‌ای"
+        },
+        "StatisticalParticipation": {
+            "Heading": "مشارکت در اطلاعات آماری",
+            "Description": "اطلاعات آماری در تحقیقات بازاریابی و برای بهبود تجربه استفاده از خدمات  به کار میرود.",
+            "HtmlName": "statistical-participation"
         }
     }
 }

src/types/i18n/settings.ts

@@ -61,9 +61,16 @@ export interface TabAuthenticator {
   ButtonSubmit: string;
 }
 
+export interface StatisticalParticipation {
+  Heading: string;
+  Description: string;
+  HtmlName: string;
+}
+
 export interface SettingsData {
   Heading: string;
   TabNotifications: TabNotifications;
   TabPassword: TabPassword;
   TabAuthenticator: TabAuthenticator;
+  StatisticalParticipation: StatisticalParticipation;
 }