settign structure

2025-04-29 15:27:46 +03:30
parent da0e5e7b8c
commit c826d21add
11 changed files with 190 additions and 1 deletions
@@ -0,0 +1,55 @@
+import Tabs from '@/components/Tabs'
+import { Brush2, Global, People, Setting3 } from 'iconsax-react'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SettingTabEnum } from './enum/SettingEnum'
+import Personality from './personality/Personality'
+
+const Setting: FC = () => {
+    const { t } = useTranslation()
+    const [activeTab, setActiveTab] = useState<SettingTabEnum>(SettingTabEnum.SETTING_PERSONALITY)
+    return (
+        <div className='mt-4'>
+            <h1>{t('setting.title')}</h1>
+
+            <div className='mt-7'>
+                <Tabs
+                    items={[
+                        {
+                            icon: <Setting3 size={22} color={activeTab === SettingTabEnum.SETTING_MAIL_SERVER ? 'black' : '#8C90A3'} />,
+                            label: t('setting.personality'),
+                            value: SettingTabEnum.SETTING_MAIL_SERVER
+                        },
+                        {
+                            icon: <Global size={22} color={activeTab === SettingTabEnum.SETTING_DOMAIN ? 'black' : '#8C90A3'} />,
+                            label: t('setting.mail_server'),
+                            value: SettingTabEnum.SETTING_DOMAIN
+                        },
+                        {
+                            icon: <People size={22} color={activeTab === SettingTabEnum.SETTING_ADDRESS ? 'black' : '#8C90A3'} />,
+                            label: t('setting.domain'),
+                            value: SettingTabEnum.SETTING_ADDRESS
+                        },
+                        {
+                            icon: <Brush2 size={22} color={activeTab === SettingTabEnum.SETTING_PERSONALITY ? 'black' : '#8C90A3'} />,
+                            label: t('setting.address'),
+                            value: SettingTabEnum.SETTING_PERSONALITY
+                        }
+                    ]}
+                    active={activeTab}
+                    onChange={(value) => setActiveTab(value as SettingTabEnum)}
+                />
+            </div>
+
+            <div className='mt-10'>
+                {
+                    activeTab === SettingTabEnum.SETTING_PERSONALITY ?
+                        <Personality />
+                        : null
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Setting
@@ -0,0 +1,6 @@
+export enum SettingTabEnum {
+  SETTING_MAIL_SERVER = "setting_mail_server",
+  SETTING_DOMAIN = "setting_domain",
+  SETTING_ADDRESS = "setting_address",
+  SETTING_PERSONALITY = "setting_personality",
+}
@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import Setting from './Setting'
+const Personality: FC = () => {
+    return (
+        <div className='flex gap-8'>
+            <div className='flex-1 bg-white rounded-4xl p-8'>
+
+            </div>
+
+            <Setting />
+        </div>
+    )
+}
+
+export default Personality
@@ -0,0 +1,31 @@
+import { FC } from 'react'
+import Logo from '@/assets/images/logo-small.svg'
+import { Gallery, LinkSquare, Setting4, Shapes, Text } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+
+const Setting: FC = () => {
+
+    const { t } = useTranslation()
+
+    return (
+        <div className='flex-1 bg-white rounded-4xl p-8 max-w-[400px] flex'>
+            <div className='flex-1'>
+                <div>
+                    {t('setting.title')}
+                </div>
+            </div>
+            <div className='w-fit pr-6 flex flex-col items-end border-r border-border'>
+                <img src={Logo} className='w-8' />
+                <div className='flex flex-col gap-6 mt-14'>
+                    <Setting4 size={20} color='black' variant='Bold' />
+                    <Text size={20} color='black' />
+                    <LinkSquare size={20} color='black' />
+                    <Gallery size={20} color='black' />
+                    <Shapes size={20} color='black' />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Setting