"use client" import { useState } from "react" import { motion } from "framer-motion" import { Upload, Video, Music, Image, FileText, X, Check, Loader2, Globe, Lock, Eye, Tag, FolderOpen, } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import { fadeIn, stagger, staggerItem, scaleIn, buttonTap, buttonTapTarget } from "@/lib/animations" const recentUploads = [ { name: "tutorial-final.mp4", size: "245 MB", status: "done", date: "Today" }, { name: "project-demo.mp4", size: "180 MB", status: "processing", date: "Today" }, { name: "intro-video.mp4", size: "89 MB", status: "done", date: "Yesterday" }, ] export default function MediaUpload() { const [dragging, setDragging] = useState(false) return (

Upload Media

Upload videos, audio, and other media files

{ e.preventDefault(); setDragging(true) }} onDragLeave={() => setDragging(false)} onDrop={() => setDragging(false)} >

Drag & drop files here

or click to browse (MP4, MOV, MP3 up to 2GB)

MP3, WAV PNG, JPG

Media Details Add information about your upload

Title

Description

</div>
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Category</Label>
                  <Select>
                    <SelectTrigger><SelectValue placeholder="Select category" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="education">Education</SelectItem>
                      <SelectItem value="entertainment">Entertainment</SelectItem>
                      <SelectItem value="music">Music</SelectItem>
                      <SelectItem value="sports">Sports</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Visibility</Label>
                  <Select>
                    <SelectTrigger><SelectValue placeholder="Public" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="public"><Globe className="size-3" /> Public</SelectItem>
                      <SelectItem value="unlisted"><Eye className="size-3" /> Unlisted</SelectItem>
                      <SelectItem value="private"><Lock className="size-3" /> Private</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="space-y-2">
                <Label>Tags</Label>
                <div className="flex flex-wrap gap-2 mb-2">
                  {["tutorial", "react", "typescript"].map((tag) => (
                    <Badge key={tag} variant="secondary" className="gap-1">{tag}<X className="size-3 cursor-pointer" /></Badge>
                  ))}
                </div>
                <div className="flex items-center gap-2">
                  <Input placeholder="Add a tag..." className="flex-1" />
                  <Button variant="outline" size="sm"><Tag className="size-3" /> Add</Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>

<motion.div variants={staggerItem}>
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Recent Uploads</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              {recentUploads.map((file) => (
                <div key={file.name} className="flex items-center gap-3 rounded-lg border p-3">
                  <div className={cn(
                    "flex size-10 items-center justify-center rounded-lg",
                    file.status === "done" ? "bg-green-500/10" : "bg-amber-500/10"
                  )}>
                    {file.status === "done" ? <Check className="size-4 text-green-500" /> : <Loader2 className="size-4 animate-spin text-amber-500" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{file.name}</p>
                    <p className="text-xs text-muted-foreground">{file.size} • {file.date}</p>
                  </div>
                  <Badge variant={file.status === "done" ? "default" : "secondary"} className="text-[10px]">{file.status}</Badge>
                  <Button variant="ghost" size="icon" className="size-8"><X className="size-3" /></Button>
                </div>
              ))}
            </CardContent>
          </Card>
        </motion.div>

<motion.div variants={staggerItem} className="flex justify-end gap-2">
          <Button variant="outline">Save Draft</Button>
          <motion.div whileTap={buttonTapTarget}>
            <Button>Publish</Button>
          </motion.div>
        </motion.div>
      </motion.div>
    </div>
  )
}
</article></body></html>