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,149 @@
+import { FC } from 'react'
+import { ImageType, ImageSize, HorizontalAlignment, VerticalAlignment } from '../types/Types'
+
+interface ImageRendererProps {
+    images: ImageType[]
+}
+
+const ImageRenderer: FC<ImageRendererProps> = ({ images }) => {
+    if (!images || images.length === 0) return null
+
+    // تابع‌های helper برای تبدیل enum به string
+    const getHorizontalAlign = (alignment?: HorizontalAlignment) => {
+        switch (alignment) {
+            case HorizontalAlignment.LEFT:
+                return 'left'
+            case HorizontalAlignment.RIGHT:
+                return 'right'
+            case HorizontalAlignment.CENTER:
+            default:
+                return 'center'
+        }
+    }
+
+    const getVerticalAlign = (verticalAlignment?: VerticalAlignment) => {
+        switch (verticalAlignment) {
+            case VerticalAlignment.TOP:
+                return 'top'
+            case VerticalAlignment.BOTTOM:
+                return 'bottom'
+            case VerticalAlignment.MIDDLE:
+            default:
+                return 'middle'
+        }
+    }
+
+    const getImageStyle = (image: ImageType) => {
+        return {
+            width: image.width || '100%',
+            height: image.height || 'auto',
+            border: '0'
+        }
+    }
+
+    const shouldUseBackgroundImage = (imageSize: ImageSize) => {
+        return imageSize === ImageSize.REPEAT ||
+            imageSize === ImageSize.REPEAT_X ||
+            imageSize === ImageSize.REPEAT_Y
+    }
+
+    const getBackgroundStyle = (image: ImageType) => {
+        let backgroundRepeat = 'no-repeat'
+
+        switch (image.size) {
+            case ImageSize.REPEAT:
+                backgroundRepeat = 'repeat'
+                break
+            case ImageSize.REPEAT_X:
+                backgroundRepeat = 'repeat-x'
+                break
+            case ImageSize.REPEAT_Y:
+                backgroundRepeat = 'repeat-y'
+                break
+            default:
+                backgroundRepeat = 'no-repeat'
+                break
+        }
+
+        const horizontal = image.alignment === HorizontalAlignment.LEFT ? 'left' :
+            image.alignment === HorizontalAlignment.RIGHT ? 'right' : 'center'
+        const vertical = image.verticalAlignment === VerticalAlignment.TOP ? 'top' :
+            image.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'center'
+
+        return {
+            backgroundImage: `url(${image.src})`,
+            backgroundPosition: `${horizontal} ${vertical}`,
+            backgroundRepeat,
+            width: image.width || '100%',
+            height: image.height || '100px'
+        }
+    }
+
+    const renderImage = (image: ImageType) => {
+        if (shouldUseBackgroundImage(image.size)) {
+            // برای pattern های repeat از background استفاده می‌کنیم
+            return (
+                <div style={getBackgroundStyle(image)}>
+                    &nbsp;
+                </div>
+            )
+        }
+
+        // برای تصاویر عادی
+        if (image.size === ImageSize.CONTAIN) {
+            // برای contain از table wrapper استفاده می‌کنیم تا نسبت حفظ شود
+            return (
+                <table width={image.width || '100%'} cellPadding="0" cellSpacing="0" border={0}>
+                    <tbody>
+                        <tr>
+                            <td align="center" valign="middle" style={{ textAlign: 'center' }}>
+                                <img
+                                    src={image.src}
+                                    alt={image.alt || 'تصویر آپلود شده'}
+                                    width={image.width || '100%'}
+                                    height={image.height || 'auto'}
+                                    style={{ border: '0' }}
+                                />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            )
+        }
+
+        // برای cover و auto
+        return (
+            <img
+                src={image.src}
+                alt={image.alt || 'تصویر آپلود شده'}
+                width={image.width || '100%'}
+                height={image.height || 'auto'}
+                style={getImageStyle(image)}
+            />
+        )
+    }
+
+    return (
+        <>
+            {images.map((image, imageIndex) => (
+                <table key={image.id} width="100%" cellPadding="0" cellSpacing="0" border={0}>
+                    <tbody>
+                        <tr>
+                            <td
+                                align={getHorizontalAlign(image.alignment)}
+                                valign={getVerticalAlign(image.verticalAlignment)}
+                                style={{
+                                    paddingBottom: imageIndex < images.length - 1 ? '4px' : '0'
+                                }}
+                            >
+                                {renderImage(image)}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            ))}
+        </>
+    )
+}
+
+export default ImageRenderer