feat: Sight Page update

2025-06-01 23:18:21 +03:00
parent 87386c6a73
commit a8777a974a
26 changed files with 3460 additions and 727 deletions
--- a/src/widgets/SightTabs/CreateInformationTab/MediaUploadBox.tsx
+++ b/src/widgets/SightTabs/CreateInformationTab/MediaUploadBox.tsx
@@ -0,0 +1,158 @@
+// import { Box, Button, Paper, Typography } from "@mui/material";
+// import { X, Upload } from "lucide-react";
+// import { useCallback, useState } from "react";
+// import { useDropzone } from "react-dropzone";
+// import { UploadMediaDialog } from "@shared";
+// import { createSightStore } from "@shared";
+
+// interface MediaUploadBoxProps {
+//   title: string;
+//   tooltip?: string;
+//   mediaId: string | null;
+//   onMediaSelect: (mediaId: string) => void;
+//   onMediaRemove: () => void;
+//   onPreviewClick: (mediaId: string) => void;
+//   token: string;
+//   type: "thumbnail" | "watermark_lu" | "watermark_rd";
+// }
+
+// export const MediaUploadBox = ({
+//   title,
+//   tooltip,
+//   mediaId,
+//   onMediaSelect,
+//   onMediaRemove,
+//   onPreviewClick,
+//   token,
+//   type,
+// }: MediaUploadBoxProps) => {
+//   const [uploadMediaOpen, setUploadMediaOpen] = useState(false);
+//   const [fileToUpload, setFileToUpload] = useState<File | null>(null);
+
+//   const onDrop = useCallback((acceptedFiles: File[]) => {
+//     if (acceptedFiles.length > 0) {
+//       setFileToUpload(acceptedFiles[0]);
+//       setUploadMediaOpen(true);
+//     }
+//   }, []);
+
+//   const { getRootProps, getInputProps, isDragActive } = useDropzone({
+//     onDrop,
+//     accept: {
+//       "image/*": [".png", ".jpg", ".jpeg", ".gif"],
+//     },
+//     multiple: false,
+//   });
+
+//   const handleUploadComplete = async (media: {
+//     id: string;
+//     filename: string;
+//     media_name?: string;
+//     media_type: number;
+//   }) => {
+//     onMediaSelect(media.id);
+//   };
+
+//   return (
+//     <>
+//       <Paper
+//         elevation={2}
+//         sx={{
+//           padding: 2,
+//           display: "flex",
+//           flexDirection: "column",
+//           alignItems: "center",
+//           gap: 1,
+//           flex: 1,
+//           minWidth: 150,
+//         }}
+//       >
+//         <Box sx={{ display: "flex", alignItems: "center" }}>
+//           <Typography variant="subtitle2" gutterBottom sx={{ mb: 0, mr: 0.5 }}>
+//             {title}
+//           </Typography>
+//         </Box>
+//         <Box
+//           {...getRootProps()}
+//           sx={{
+//             position: "relative",
+//             width: "200px",
+//             height: "200px",
+//             display: "flex",
+//             alignItems: "center",
+//             justifyContent: "center",
+//             borderRadius: 1,
+//             mb: 1,
+//             cursor: mediaId ? "pointer" : "default",
+//             border: isDragActive ? "2px dashed #1976d2" : "none",
+//             backgroundColor: isDragActive
+//               ? "rgba(25, 118, 210, 0.04)"
+//               : "transparent",
+//             transition: "all 0.2s ease",
+//           }}
+//         >
+//           <input {...getInputProps()} />
+//           {mediaId && (
+//             <button
+//               className="absolute top-2 right-2 z-10"
+//               onClick={(e) => {
+//                 e.stopPropagation();
+//                 onMediaRemove();
+//               }}
+//             >
+//               <X color="red" />
+//             </button>
+//           )}
+//           {mediaId ? (
+//             <img
+//               src={`${
+//                 import.meta.env.VITE_KRBL_MEDIA
+//               }${mediaId}/download?token=${token}`}
+//               alt={title}
+//               style={{ maxWidth: "100%", maxHeight: "100%" }}
+//               onClick={(e) => {
+//                 e.stopPropagation();
+//                 onPreviewClick(mediaId);
+//               }}
+//             />
+//           ) : (
+//             <div className="w-full flex flex-col items-center justify-center gap-3">
+//               <div
+//                 className={`w-full h-20 border rounded-md flex flex-col items-center transition-all duration-300 justify-center border-dashed ${
+//                   isDragActive
+//                     ? "border-blue-500 bg-blue-50"
+//                     : "border-gray-300"
+//                 } cursor-pointer hover:bg-gray-100`}
+//               >
+//                 <Upload size={24} className="mb-2" />
+//                 <p>
+//                   {isDragActive ? "Отпустите файл здесь" : "Перетащите файл"}
+//                 </p>
+//               </div>
+//               <p>или</p>
+//               <Button
+//                 variant="contained"
+//                 color="primary"
+//                 onClick={(e) => {
+//                   e.stopPropagation();
+//                   onMediaSelect("");
+//                 }}
+//               >
+//                 Выбрать файл
+//               </Button>
+//             </div>
+//           )}
+//         </Box>
+//       </Paper>
+
+//       <UploadMediaDialog
+//         open={uploadMediaOpen}
+//         onClose={() => {
+//           setUploadMediaOpen(false);
+//           setFileToUpload(null);
+//         }}
+//         afterUpload={handleUploadComplete}
+//       />
+//     </>
+//   );
+// };