audio + fix bug

src/components/AudioUploadZone.tsx

@@ -1,36 +1,51 @@
 import { type FC } from "react";
 import { DocumentUpload, Music } from "iconsax-react";
+import { clx } from "@/helpers/utils";
 
 type AudioUploadZoneProps = {
     getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
     getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+    isLoading?: boolean;
+    loadingLabel?: string;
 };
 
-const AudioUploadZone: FC<AudioUploadZoneProps> = ({ getRootProps, getInputProps }) => {
+const AudioUploadZone: FC<AudioUploadZoneProps> = ({
+    getRootProps,
+    getInputProps,
+    isLoading = false,
+    loadingLabel = "در حال آپلود...",
+}) => {
     return (
         <div
             {...getRootProps()}
-            className="w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl cursor-pointer hover:bg-gray-50 transition-colors"
+            className={clx(
+                "w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl transition-colors",
+                isLoading
+                    ? "pointer-events-none opacity-80"
+                    : "cursor-pointer hover:bg-gray-50"
+            )}
         >
             <input {...getInputProps()} />
-            <Music
-                size={32}
-                color="#8C90A3"
-                variant="Outline"
-            />
-            <div className="text-description text-xs">
-                فایل صوتی مورد نظر را آپلود کنید
-            </div>
-            <div className="text-description text-[10px]">
-                mp3, wav, ogg, m4a, aac, flac
-            </div>
-            <div className="flex items-center gap-2">
-                <DocumentUpload
-                    size={16}
-                    color="black"
-                />
-                <div className="text-xs">آپلود</div>
-            </div>
+            {isLoading ? (
+                <>
+                    <span className="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
+                    <div className="text-description text-xs">{loadingLabel}</div>
+                </>
+            ) : (
+                <>
+                    <Music size={32} color="#8C90A3" variant="Outline" />
+                    <div className="text-description text-xs">
+                        فایل صوتی مورد نظر را آپلود کنید
+                    </div>
+                    <div className="text-description text-[10px]">
+                        mp3, wav, ogg, m4a, aac, flac
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <DocumentUpload size={16} color="black" />
+                        <div className="text-xs">آپلود</div>
+                    </div>
+                </>
+            )}
         </div>
     );
 };