Editor Upload

1'use client';
2 
3import React, { useState, useCallback } from 'react';
4import { useDropzone } from 'react-dropzone';
5import { UploadCloud } from 'lucide-react';
6import {
7  DndContext,
8  closestCenter,
9  KeyboardSensor,
10  PointerSensor,
11  useSensor,
12  useSensors,
13  DragEndEvent,
14} from '@dnd-kit/core';
15import {
16  arrayMove,
17  SortableContext,
18  sortableKeyboardCoordinates,
19  rectSortingStrategy,
20  useSortable,
21} from '@dnd-kit/sortable';
22import { CSS } from '@dnd-kit/utilities';
23import { Button } from '../ui/button';
24import { X, File, Music, Video } from 'lucide-react';
25import { cn } from '@/lib/utils/deso';
26 
27export interface UploadedFile {
28  id: string;
29  file: File;
30  preview: string;
31  progress?: number;
32}
33 
34export type UploadType = 'image' | 'video' | 'audio';
35 
36interface EditorUploadProps {
37  files: UploadedFile[];
38  onFilesChange: (files: UploadedFile[]) => void;
39  onFileUpload: (files: File[]) => void;
40  uploadType: UploadType;
41  className?: string;
42  mainText?: string;
43  subText?: string;
44}
45 
46 
47interface UploadAreaProps {
48  onFileUpload: (files: File[]) => void;
49  accept?: Record<string, string[]>;
50  multiple?: boolean;
51  className?: string;
52  mainText?: string;
53  subText?: string;
54}
55 
56export function UploadArea({
57  onFileUpload,
58  accept,
59  multiple = true,
60  className,
61  mainText,
62  subText,
63}: UploadAreaProps) {
64  const [isDragging, setIsDragging] = useState(false);
65 
66  const onDrop = useCallback(
67    (acceptedFiles: File[]) => {
68      onFileUpload(acceptedFiles);
69      setIsDragging(false);
70    },
71    [onFileUpload]
72  );
73 
74  const { getRootProps, getInputProps, isDragActive } = useDropzone({
75    onDrop,
76    accept,
77    multiple,
78    onDragOver: () => setIsDragging(true),
79    onDragEnter: () => setIsDragging(true),
80    onDragLeave: () => setIsDragging(false),
81  });
82 
83  return (
84    <div
85      {...getRootProps()}
86      className={cn(
87        'border-2 border-dashed border-muted-foreground/30 rounded-lg p-8 text-center cursor-pointer transition-colors',
88        isDragActive || isDragging ? 'border-primary bg-primary/10' : 'hover:border-muted-foreground/50 hover:bg-muted/50',
89        className
90      )}
91    >
92      <input type="file" {...getInputProps()} />
93      <div className="flex flex-col items-center gap-2 text-muted-foreground">
94        <UploadCloud className="w-10 h-10" />
95        <p className="font-semibold text-foreground">{mainText}</p>
96        <p className="text-xs text-muted-foreground">
97          {subText}
98        </p>
99      </div>
100    </div>
101// … truncated