feat: Sight Page update

src/widgets/MediaArea/index.tsx

@@ -0,0 +1,135 @@
+import { Box, Button } from "@mui/material";
+import { MediaViewer } from "@widgets";
+import { PreviewMediaDialog } from "@shared";
+import { X, Upload } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { useState, DragEvent, useRef } from "react";
+
+export const MediaArea = observer(
+  ({
+    articleId,
+    mediaIds,
+    deleteMedia,
+    onFilesDrop, // 👈 Проп для обработки загруженных файлов
+    setSelectMediaDialogOpen,
+  }: {
+    articleId: number;
+    mediaIds: { id: string; media_type: number; filename: string }[];
+    deleteMedia: (id: number, media_id: string) => void;
+    onFilesDrop?: (files: File[]) => void;
+    setSelectMediaDialogOpen: (open: boolean) => void;
+  }) => {
+    const [mediaModal, setMediaModal] = useState<boolean>(false);
+    const [mediaId, setMediaId] = useState<string>("");
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleMediaModal = (mediaId: string) => {
+      setMediaModal(true);
+      setMediaId(mediaId);
+    };
+
+    const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length && onFilesDrop) {
+        onFilesDrop(files);
+      }
+    };
+
+    const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      setIsDragging(true);
+    };
+
+    const handleDragLeave = () => {
+      setIsDragging(false);
+    };
+
+    const handleClick = () => {
+      fileInputRef.current?.click();
+    };
+
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      if (files.length && onFilesDrop) {
+        onFilesDrop(files);
+      }
+      // Сбрасываем значение input, чтобы можно было выбрать тот же файл снова
+      event.target.value = "";
+    };
+
+    return (
+      <>
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileSelect}
+          accept="image/*,video/*,.glb,.gltf"
+          multiple
+          style={{ display: "none" }}
+        />
+        <Box className="w-full flex flex-col items-center justify-center border rounded-md p-4">
+          <div className="w-full flex flex-col items-center justify-center">
+            <div
+              className={`w-full h-40 flex flex-col justify-center items-center text-gray-400 border-dashed border-2 rounded-md border-gray-400 p-4 cursor-pointer hover:bg-gray-50 ${
+                isDragging ? "bg-blue-100 border-blue-400" : ""
+              }`}
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onClick={handleClick}
+            >
+              <Upload size={32} className="mb-2" />
+              Перетащите медиа файлы сюда или нажмите для выбора
+            </div>
+            <div>или</div>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => setSelectMediaDialogOpen(true)}
+            >
+              Выбрать существующие медиа файлы
+            </Button>
+          </div>
+
+          <div className="w-full flex flex-start flex-wrap gap-2 mt-4">
+            {mediaIds.map((m) => (
+              <button
+                className="relative w-40 h-40"
+                key={m.id}
+                onClick={() => handleMediaModal(m.id)}
+              >
+                <MediaViewer
+                  media={{
+                    id: m.id,
+                    media_type: m.media_type,
+                    filename: m.filename,
+                  }}
+                />
+                <button
+                  className="absolute top-2 right-2"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteMedia(articleId, m.id);
+                  }}
+                >
+                  <X size={16} color="red" />
+                </button>
+              </button>
+            ))}
+          </div>
+        </Box>
+
+        <PreviewMediaDialog
+          open={mediaModal}
+          onClose={() => setMediaModal(false)}
+          mediaId={mediaId}
+        />
+      </>
+    );
+  }
+);