diff --git a/frontend/src/components/shared/FileUploadButton.tsx b/frontend/src/components/shared/FileUploadButton.tsx new file mode 100644 index 000000000..da7c3793a --- /dev/null +++ b/frontend/src/components/shared/FileUploadButton.tsx @@ -0,0 +1,45 @@ +import React, { useRef } from "react"; +import { FileButton, Button } from "@mantine/core"; +import { useTranslation } from "react-i18next"; + +interface FileUploadButtonProps { + file?: File; + onChange: (file: File | null) => void; + accept?: string; + disabled?: boolean; + placeholder?: string; + variant?: "outline" | "filled" | "light" | "default" | "subtle" | "gradient"; + fullWidth?: boolean; +} + +const FileUploadButton = ({ + file, + onChange, + accept = "*/*", + disabled = false, + placeholder, + variant = "outline", + fullWidth = true +}: FileUploadButtonProps) => { + const { t } = useTranslation(); + const resetRef = useRef<() => void>(null); + + const defaultPlaceholder = t('common.chooseFile', 'Choose File'); + + return ( + + {(props) => ( + + )} + + ); +}; + +export default FileUploadButton; \ No newline at end of file diff --git a/frontend/src/components/tools/addWatermark/AddWatermarkSettings.tsx b/frontend/src/components/tools/addWatermark/AddWatermarkSettings.tsx deleted file mode 100644 index 3dcc63bfe..000000000 --- a/frontend/src/components/tools/addWatermark/AddWatermarkSettings.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import React, { useRef } from "react"; -import { Button, Stack, Text, NumberInput, Select, TextInput, FileButton } from "@mantine/core"; -import { useTranslation } from "react-i18next"; - -interface AddWatermarkParameters { - watermarkType: 'text' | 'image'; - watermarkText: string; - watermarkImage?: File; - fontSize: number; - rotation: number; - opacity: number; - widthSpacer: number; - heightSpacer: number; - position: string; - overrideX?: number; - overrideY?: number; -} - -interface AddWatermarkSettingsProps { - parameters: AddWatermarkParameters; - onParameterChange: (key: keyof AddWatermarkParameters, value: any) => void; - disabled?: boolean; -} - -const AddWatermarkSettings = ({ parameters, onParameterChange, disabled = false }: AddWatermarkSettingsProps) => { - const { t } = useTranslation(); - const resetRef = useRef<() => void>(null); - - const positionOptions = [ - { value: 'topLeft', label: 'Top Left' }, - { value: 'topCenter', label: 'Top Center' }, - { value: 'topRight', label: 'Top Right' }, - { value: 'centerLeft', label: 'Center Left' }, - { value: 'center', label: 'Center' }, - { value: 'centerRight', label: 'Center Right' }, - { value: 'bottomLeft', label: 'Bottom Left' }, - { value: 'bottomCenter', label: 'Bottom Center' }, - { value: 'bottomRight', label: 'Bottom Right' } - ]; - - return ( - - {/* Watermark Type Selection */} - - Watermark Type -
- - -
-
- - {/* Text Watermark Settings */} - {parameters.watermarkType === 'text' && ( - - Watermark Text - onParameterChange('watermarkText', e.target.value)} - disabled={disabled} - /> - - Font Size - onParameterChange('fontSize', value || 12)} - min={8} - max={72} - disabled={disabled} - /> - - )} - - {/* Image Watermark Settings */} - {parameters.watermarkType === 'image' && ( - - Watermark Image - onParameterChange('watermarkImage', file)} - accept="image/*" - disabled={disabled} - > - {(props) => ( - - )} - - {parameters.watermarkImage && ( - - Selected: {parameters.watermarkImage.name} - - )} - - )} - - {/* Position Settings */} - - Position -