File Upload with Status Sections

1'use client';
2 
3import { CheckCircle, FileText, Loader2, Upload, X } from 'lucide-react';
4import type React from 'react';
5import { useRef, useState } from 'react';
6import { Button } from '@/components/ui/button';
7import { Card } from '@/components/ui/card';
8import { Progress } from '@/components/ui/progress';
9import { Separator } from '@/components/ui/separator';
10 
11interface UploadItem {
12  id: string;
13  name: string;
14  progress: number;
15  status: 'uploading' | 'completed';
16}
17 
18export default function FileUpload06() {
19  const [uploads, setUploads] = useState<UploadItem[]>([
20    {
21      id: 'a1',
22      name: 'design-mock-landing.png',
23      progress: 62,
24      status: 'uploading',
25    },
26    {
27      id: 'b2',
28      name: 'team-headshot-2025-01-09.jpg',
29      progress: 28,
30      status: 'uploading',
31    },
32    {
33      id: 'c3',
34      name: 'logo-v3-final.gif',
35      progress: 100,
36      status: 'completed',
37    },
38  ]);
39  const filePickerRef = useRef<HTMLInputElement>(null);
40 
41  const openFilePicker = () => {
42    filePickerRef.current?.click();
43  };
44 
45  const onFileInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
46    const selectedFiles = event.target.files;
47    if (selectedFiles) {
48      console.log('Files selected:', selectedFiles);
49    }
50  };
51 
52  const onDragOver = (event: React.DragEvent) => {
53    event.preventDefault();
54  };
55 
56  const onDropFiles = (event: React.DragEvent) => {
57    event.preventDefault();
58    const droppedFiles = event.dataTransfer.files;
59    if (droppedFiles) {
60      console.log('Files dropped:', droppedFiles);
61    }
62  };
63 
64  const removeUploadById = (id: string) => {
65    setUploads(uploads.filter((file) => file.id !== id));
66  };
67 
68  const activeUploads = uploads.filter((file) => file.status === 'uploading');
69  const completedUploads = uploads.filter(
70    (file) => file.status === 'completed'
71  );
72 
73  return (
74    <div className="mx-auto flex w-full max-w-sm flex-col gap-y-6">
75      <Card
76        className="group flex max-h-[200px] w-full cursor-pointer flex-col items-center justify-center gap-4 border-dashed py-8 text-sm shadow-none transition-colors hover:bg-muted/50"
77        onClick={openFilePicker}
78        onDragOver={onDragOver}
79        onDrop={onDropFiles}
80      >
81        <div className="grid space-y-3">
82          <div className="flex items-center gap-x-2 text-muted-foreground">
83            <Upload className="size-5" />
84            <div>
85              Drop files here or{' '}
86              <Button
87// … truncated