base admin

src/pages/editor/components/sidebar/ObjectSettings.tsx

@@ -7,6 +7,7 @@ import {
     SizeSettings,
     LinkSettings,
     VideoSettings,
+    AudioSettings,
     AlignmentSettings,
     TransformSettings,
     GridSettings,
@@ -103,7 +104,9 @@ const ObjectSettings = ({
                 <VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
-
+            {roundedSelectedObject.type === "audio" && (
+                <AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
+            )}
 
             {(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && (
                 <SizeSettings

src/pages/editor/components/sidebar/ToolInstructions.tsx

@@ -2,6 +2,7 @@ import { type ToolType } from "@/pages/editor/store/editorStore";
 import {
     ImageGallery,
     VideoInput,
+    AudioInput,
     LinkInput,
     SelectInstruction,
     RectangleInstruction,
@@ -25,6 +26,10 @@ const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
         return <VideoInput />;
     }
 
+    if (tool === "audio") {
+        return <AudioInput />;
+    }
+
     if (tool === "link") {
         return <LinkInput />;
     }

src/pages/editor/components/sidebar/ToolsBar.tsx

@@ -8,6 +8,7 @@ import {
     Sticker,
     Text,
     VideoSquare,
+    Music,
     Minus,
     Link2,
 } from "iconsax-react";
@@ -21,6 +22,7 @@ const tools: Array<{ icon: (color: string, variant?: "Bold" | "Outline" | "Broke
     { icon: (color, variant) => <Gallery size={20} color={color} variant={variant} />, tool: "image", label: "گالری" },
     { icon: (color, variant) => <Link2 size={20} color={color} variant={variant} />, tool: "link", label: "لینک" },
     { icon: (color, variant) => <VideoSquare size={20} color={color} variant={variant} />, tool: "video", label: "ویدیو" },
+    { icon: (color, variant) => <Music size={20} color={color} variant={variant} />, tool: "audio", label: "صدا" },
     { icon: (color, variant) => <ArrowLeft size={20} color={color} variant={variant} />, tool: "arrow", label: "پیکان" },
     { icon: (color, variant) => <Minus size={20} color={color} variant={variant} />, tool: "line", label: "خط" },
     { icon: (color, variant) => <Sticker size={20} color={color} variant={variant} />, tool: "sticker", label: "استیکر" },

src/pages/editor/components/sidebar/instructions/AudioInput.tsx

@@ -0,0 +1,96 @@
+import { type FC, useCallback, useMemo } from "react";
+import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
+import { CloseCircle, Music } from "iconsax-react";
+import { useDropzone } from "react-dropzone";
+import AudioUploadZone from "@/components/AudioUploadZone";
+
+export const AUDIO_ACCEPT = {
+    "audio/*": [".mp3", ".wav", ".ogg", ".m4a", ".aac", ".flac", ".webm"],
+} as const;
+
+const AudioInput: FC = () => {
+    const { objects, addObject, setSelectedObjectId, setTool, deleteObject } =
+        useEditorStore();
+    const { mutateAsync: uploadFile } = useSingleUpload();
+
+    const onDrop = useCallback(
+        async (acceptedFiles: File[]) => {
+            for (const file of acceptedFiles) {
+                try {
+                    const result = await uploadFile(file);
+                    const audioUrl = result?.data?.url;
+                    if (!audioUrl) continue;
+                    const audioId = `audio-${Date.now()}-${Math.random()}`;
+                    const newAudio = {
+                        id: audioId,
+                        type: "audio" as ToolType,
+                        x: 100,
+                        y: 100,
+                        width: 320,
+                        height: 56,
+                        audioUrl,
+                    };
+                    addObject(newAudio);
+                    setSelectedObjectId(newAudio.id);
+                    setTool("select");
+                } catch {
+                    // TODO: show error toast
+                }
+            }
+        },
+        [addObject, setSelectedObjectId, setTool, uploadFile]
+    );
+
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop,
+        accept: AUDIO_ACCEPT,
+        multiple: true,
+    });
+
+    const audioObjects = useMemo(() => {
+        return objects.filter((obj) => obj.type === "audio");
+    }, [objects]);
+
+    const handleDeleteAudio = (audioId: string) => {
+        deleteObject(audioId);
+    };
+
+    return (
+        <div className="space-y-4">
+            <div className="text-base font-bold">صدا</div>
+
+            <AudioUploadZone
+                getRootProps={getRootProps}
+                getInputProps={getInputProps}
+            />
+
+            {audioObjects.length > 0 && (
+                <div className="space-y-2">
+                    <div className="text-xs font-bold">فایل‌های صوتی آپلود شده</div>
+                    <div className="flex flex-col gap-2">
+                        {audioObjects.map((audioObject) => (
+                            <div
+                                key={audioObject.id}
+                                className="relative flex items-center gap-2 rounded-lg border border-border bg-gray-50 px-3 py-2"
+                            >
+                                <Music size={20} color="#8C90A3" variant="Bold" />
+                                <span className="flex-1 truncate text-xs text-description">
+                                    فایل صوتی
+                                </span>
+                                <button
+                                    onClick={() => handleDeleteAudio(audioObject.id)}
+                                    className="absolute -right-1 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center hover:bg-gray-100 transition-colors"
+                                >
+                                    <CloseCircle size={16} color="red" />
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AudioInput;

src/pages/editor/components/sidebar/instructions/index.ts

@@ -2,6 +2,7 @@ export { default as ImageGallery } from "./ImageGallery";
 export { default as ImageUpload } from "./ImageUpload";
 export { default as DocumentUpload } from "./DocumentUpload";
 export { default as VideoInput } from "./VideoInput";
+export { default as AudioInput } from "./AudioInput";
 export { default as LinkInput } from "./LinkInput";
 export { default as SelectInstruction } from "./SelectInstruction";
 export { default as RectangleInstruction } from "./RectangleInstruction";

src/pages/editor/components/sidebar/settings/AudioSettings.tsx

@@ -0,0 +1,29 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+import SizeSettings from "./SizeSettings";
+
+type AudioSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const AudioSettings = ({ selectedObject, onUpdate }: AudioSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="آدرس فایل صوتی"
+                value={selectedObject.audioUrl || ""}
+                onChange={(e) => onUpdate(selectedObject.id, { audioUrl: e.target.value })}
+                placeholder="https://example.com/audio.mp3"
+            />
+            <SizeSettings
+                selectedObject={selectedObject}
+                onUpdate={onUpdate}
+                defaultWidth={320}
+                defaultHeight={56}
+            />
+        </>
+    );
+};
+
+export default AudioSettings;

src/pages/editor/components/sidebar/settings/index.ts

@@ -4,6 +4,7 @@ export { default as LineSettings } from "./LineSettings";
 export { default as SizeSettings } from "./SizeSettings";
 export { default as LinkSettings } from "./LinkSettings";
 export { default as VideoSettings } from "./VideoSettings";
+export { default as AudioSettings } from "./AudioSettings";
 export { default as AlignmentSettings } from "./AlignmentSettings";
 export { default as TransformSettings } from "./TransformSettings";
 export { default as GridSettings } from "./GridSettings";