setting personality

2025-06-21 17:20:00 +03:30
parent 4c869c42c6
commit 037113ee09
18 changed files with 712 additions and 190 deletions
@@ -0,0 +1,41 @@
+import { FC, useState } from 'react'
+import { Gallery, LinkSquare, Setting4, Text } from 'iconsax-react'
+import Logo from '@/assets/images/logo-small.svg'
+import SettingSideBar from './components/SettingSideBar'
+import { SideBarTab } from '../enum/SettingEnum'
+import TextSidebar from './components/TextSidebar'
+import ButtonSidebar from './components/ButtonSidebar'
+import ImageSideBar from './components/ImageSideBar'
+
+const PersonalitySidebar: FC = () => {
+
+    const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
+
+    return (
+        <div className='bg-white rounded-3xl w-[360px] flex'>
+            <div className='flex-1 p-6'>
+                {
+                    active === SideBarTab.SETTING ? <SettingSideBar />
+                        : active === SideBarTab.TEXT ? <TextSidebar />
+                            : active === SideBarTab.BUTTON ? <ButtonSidebar />
+                                : active === SideBarTab.IMAGE ? <ImageSideBar />
+                                    : null
+                }
+
+
+
+            </div>
+            <div className='w-20 border-r border-gray-200 flex flex-col items-center pt-6 pb-6'>
+                <img src={Logo} className='w-8' alt="Logo" />
+                <div className='flex flex-col gap-10 mt-16'>
+                    <Setting4 size={22} color='black' variant={SideBarTab.SETTING === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.SETTING)} className='cursor-pointer' />
+                    <Text size={22} color='black' variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.TEXT)} className='cursor-pointer' />
+                    <LinkSquare size={22} color='black' variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.BUTTON)} className='cursor-pointer' />
+                    <Gallery size={22} color='black' variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.IMAGE)} className='cursor-pointer' />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PersonalitySidebar