[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Card } from "@/components/ui/card" import { cn } from "@/lib/utils" interface TextCard { id: string title: string description: string } interface DropZone { id: string hasContent: boolean content?: TextCard } const initialTextCards: TextCard[] = [ { id: "1", title: "Project Planning", description: "Organize your tasks and set clear milestones. Break down complex projects into manageable steps.", }, { id: "2", title: "Team Collaboration", description: "Work together seamlessly with your team members. Share ideas and communicate effectively.", }, { id: "3", title: "Time Management", description: "Track your time and optimize your productivity. Focus on what matters most to achieve your goals.", }, { id: "4", title: "Creative Thinking", description: "Unlock your creative potential with innovative approaches. Think outside the box to solve problems.", }, { id: "5", title: "Data Analysis", description: "Transform raw data into actionable insights. Make informed decisions based on solid evidence.", }, ] export default function DragDropPage() { const [textCards, setTextCards] = useState(initialTextCards) const [dropZones, setDropZones] = useState([ { id: "zone-1", hasContent: false }, { id: "zone-2", hasContent: false }, { id: "zone-3", hasContent: false }, { id: "zone-4", hasContent: false }, ]) const [draggedCard, setDraggedCard] = useState(null) const [dragOverZone, setDragOverZone] = useState(null) const [dragOverIndex, setDragOverIndex] = useState(null) const [draggedFromList, setDraggedFromList] = useState(false) const handleDragStart = (card: TextCard) => { setDraggedCard(card) setDraggedFromList(true) } const handleDragEnd = () => { setDraggedCard(null) setDragOverZone(null) setDragOverIndex(null) setDraggedFromList(false) } const handleDragOver = (e: React.DragEvent, zoneId: string) => { e.preventDefault() setDragOverZone(zoneId) } const handleDragLeave = () => { setDragOverZone(null) } const handleListDragOver = (e: React.DragEvent, index: number) => { e.preventDefault() if (draggedFromList) { setDragOverIndex(index) } } const handleListDragLeave = () => { setDragOverIndex(null) } const handleListDrop = (e: React.DragEvent, dropIndex: number) => { e.preventDefault() if (!draggedCard || !draggedFromList) return const draggedIndex = textCards.findIndex((card) => card.id === draggedCard.id) if (draggedIndex === -1) return const newCards = [...textCards] const [removed] = newCards.splice(draggedIndex, 1) newCards.splice(dropIndex, 0, removed) setTextCards(newCards) setDragOverIndex(null) } const handleDrop = (e: React.DragEvent, zoneId: string) => { e.preventDefault() if (!draggedCard || draggedFromList) return // Remove card from text cards setTextCards((prev) => prev.filter((card) => card.id !== draggedCard.id)) // Add card to drop zone setDropZones((prev) => prev.map((zone) => (zone.id === zoneId ? { ...zone, hasContent: true, content: draggedCard } : zone)), ) setDraggedCard(null) setDragOverZone(null) } return (

{/* Left side - Drop zones (4/5 of the space) */}

{dropZones.map((zone) => ( handleDragOver(e, zone.id)} onDragLeave={handleDragLeave} onDrop={(e) => handleDrop(e, zone.id)} style={{ transform: dragOverZone === zone.id ? "rotateX(2deg) rotateY(-2deg) scale(1.02)" : "rotateX(1deg) rotateY(-1deg)", boxShadow: dragOverZone === zone.id ? "0 25px 50px -12px rgba(147, 51, 234, 0.25)" : "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", }} > {zone.hasContent && zone.content ? (

😊

{zone.content.title}

{zone.content.description}

) : (

Drop a card here

)} ))}

{/* Right side - Text cards column (1/5 of the space) */}

Drag Cards

{textCards.map((card, index) => (

{dragOverIndex === index && draggedFromList && (

)}

{index + 1}

handleDragStart(card)} onDragEnd={handleDragEnd} onDragOver={(e) => handleListDragOver(e, index)} onDragLeave={handleListDragLeave} onDrop={(e) => handleListDrop(e, index)} >

{card.title}

{card.description}

{index === textCards.length - 1 && dragOverIndex === textCards.length && draggedFromList && (

)}

))}

) }