admin panel

2025-07-08 12:43:22 +03:30
parent fed1933ec4
commit e019641d59
110 changed files with 13274 additions and 0 deletions
@@ -0,0 +1,187 @@
+import { FC, useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import UploadBoxDraggble from '@/components/UploadBoxDraggble';
+import ColorPicker from '@/components/ColorPicker';
+import { usePersonalityStore } from '../store/Store';
+import { SectionItemType, BackgroundSize, SectionName } from '../types/Types';
+import Select from '@/components/Select';
+
+const SettingSideBar: FC = () => {
+    const { t } = useTranslation()
+    const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex } = usePersonalityStore()
+    const [color, setColor] = useState("#aabbcc");
+    const [backgroundSize, setBackgroundSize] = useState<BackgroundSize>(BackgroundSize.COVER)
+
+    // تشخیص background size بر اساس style موجود
+    const getCurrentBackgroundSizeType = (style?: SectionItemType['style']) => {
+        if (!style) return BackgroundSize.COVER
+
+        const bgSize = style.backgroundSize
+        const bgRepeat = style.backgroundRepeat
+
+        if (bgSize === 'cover') return BackgroundSize.COVER
+        if (bgSize === 'contain') return BackgroundSize.CONTAIN
+        if (bgSize === 'auto' || !bgSize) {
+            if (bgRepeat === 'round') return BackgroundSize.ROUND
+        }
+        return BackgroundSize.COVER
+    }
+
+    // به‌روزرسانی state وقتی activeSection یا activeItem تغییر می‌کند
+    useEffect(() => {
+        if (activeSection && data[activeSection as keyof typeof data]) {
+            const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex]
+            if (currentItem?.style) {
+                const currentType = getCurrentBackgroundSizeType(currentItem.style)
+                setBackgroundSize(currentType)
+            }
+        }
+    }, [activeSection, activeItemIndex, data])
+
+    const handleColumnClick = (columns: number) => {
+        if (activeSection) {
+            setColumnsCount(activeSection as SectionName, columns);
+        }
+    }
+
+    const handleColorChange = (color: string) => {
+        setColor(color)
+        updateActiveItem({ backgroundColor: color })
+    }
+
+    const handleUploadBackground = (file: File[]) => {
+        if (activeSection && file.length > 0) {
+            const imageUrl = URL.createObjectURL(file[0])
+            console.log('Setting background image:', imageUrl)
+
+            const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex]
+            updateActiveItem({
+                backgroundImage: imageUrl,
+                style: {
+                    ...currentItem?.style,
+                    backgroundSize: getBackgroundSize(backgroundSize),
+                    backgroundRepeat: getBackgroundRepeat(backgroundSize),
+                    backgroundPosition: 'center center'
+                }
+            })
+        }
+    }
+
+    const getBackgroundRepeat = (size: BackgroundSize) => {
+        switch (size) {
+            case BackgroundSize.ROUND:
+                return 'round'
+            case BackgroundSize.COVER:
+            case BackgroundSize.CONTAIN:
+            default:
+                return 'no-repeat'
+        }
+    }
+
+    const getBackgroundSize = (size: BackgroundSize) => {
+        switch (size) {
+            case BackgroundSize.COVER:
+                return 'cover'
+            case BackgroundSize.CONTAIN:
+                return 'contain'
+            case BackgroundSize.ROUND:
+                return 'auto'
+            default:
+                return 'cover'
+        }
+    }
+
+    const sizeOptions = [
+        { label: 'کاور - تمام فضا را پوشش دهد (Cover)', value: BackgroundSize.COVER },
+        { label: 'در مقیاس - در فضا جا شود (Contain)', value: BackgroundSize.CONTAIN },
+        { label: 'گرد - عکس به صورت گرد تکرار شود (Round)', value: BackgroundSize.ROUND }
+    ]
+
+    if (!activeSection) {
+        return (
+            <div className='text-center text-gray-500 mt-8'>
+                {t('setting.select_section')}
+            </div>
+        )
+    }
+
+    return (
+        <div>
+            <div className='text-lg'>{t('setting.setting')}</div>
+
+            <div className='flex h-[51px] gap-5 mt-6'>
+                <div
+                    className='w-[102px] h-full bg-[#EAECF4] cursor-pointer hover:bg-[#d1d5db] transition-colors'
+                    onClick={() => handleColumnClick(1)}
+                ></div>
+                <div
+                    className='w-[102px] h-full flex gap-1 cursor-pointer group'
+                    onClick={() => handleColumnClick(2)}
+                >
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                </div>
+            </div>
+
+            <div className='flex h-[51px] gap-5 mt-5'>
+                <div
+                    className='w-[102px] h-full flex gap-1 cursor-pointer group'
+                    onClick={() => handleColumnClick(3)}
+                >
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                </div>
+                <div
+                    className='w-[102px] h-full flex gap-1 cursor-pointer group'
+                    onClick={() => handleColumnClick(4)}
+                >
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                    <div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
+                </div>
+            </div>
+
+            <div className='mt-5'>
+                <ColorPicker
+                    label={t('setting.background')}
+                    defaultColor={color}
+                    changeColor={handleColorChange}
+                />
+            </div>
+
+            <div className='mt-5'>
+                <UploadBoxDraggble
+                    label={t('setting.upload_background')}
+                    onChange={handleUploadBackground}
+                />
+            </div>
+
+            <div className='mt-5'>
+                <Select
+                    items={sizeOptions}
+                    label={t('setting.size')}
+                    value={backgroundSize}
+                    onChange={(e) => {
+                        const newSize = e.target.value as BackgroundSize
+                        setBackgroundSize(newSize)
+
+                        const currentItem = activeSection ? data[activeSection as keyof typeof data]?.items[activeItemIndex] : null
+                        updateActiveItem({
+                            style: {
+                                ...currentItem?.style,
+                                backgroundSize: getBackgroundSize(newSize),
+                                backgroundRepeat: getBackgroundRepeat(newSize),
+                                backgroundPosition: 'center center'
+                            }
+                        })
+                    }}
+                    placeholder={t('setting.size')}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default SettingSideBar