Reorderable

import {
	ReorderableList,
	ReorderableItem,
	ReorderableTrigger,
	ReorderableSeparator,
} from "@/components/ui/reorderable"

export default () => {
	const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"])

	return (
		<ReorderableList items={items} onReorder={setItems}>
			{items.map((item, index) => (
				<>
					<ReorderableSeparator index={index} />
					<ReorderableItem key={index} index={index}>
						<ReorderableTrigger />
						{item}
					</ReorderableItem>
				</>
			))}
			<ReorderableSeparator index={items.length} />
		</ReorderableList>
	)
}

"use client"

import { useState } from "react"
import {
	ReorderableList,
	ReorderableItem,
	ReorderableTrigger,
	ReorderableSeparator,
} from "@/components/ui/reorderable"

export default function ReorderableDemo() {
	const [tasks, setTasks] = useState([
		"Design landing page",
		"Implement authentication",
		"Write documentation",
	])

	return (
		<ReorderableList items={tasks} onReorder={setTasks} className="space-y-2">
			{tasks.map((task, index) => (
				<>
					<ReorderableSeparator key={`sep-${index}`} index={index} />
					<ReorderableItem
						key={task}
						index={index}
						className="flex items-center gap-2 p-4 bg-card border rounded-lg"
					>
						<ReorderableTrigger className="cursor-move">⋮⋮</ReorderableTrigger>
						<span>{task}</span>
					</ReorderableItem>
				</>
			))}
			<ReorderableSeparator index={tasks.length} />
		</ReorderableList>
	)
}

"use client"

import { useState } from "react"
import { GripVertical } from "lucide-react"
import {
	ReorderableList,
	ReorderableItem,
	ReorderableTrigger,
	ReorderableSeparator,
} from "@/components/ui/reorderable"
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"

interface Project {
	id: string
	title: string
	description: string
}

export default function ProjectList() {
	const [projects, setProjects] = useState<Project[]>([
		{ id: "1", title: "Website Redesign", description: "Modernize the company website" },
		{ id: "2", title: "Mobile App", description: "Build iOS and Android apps" },
		{ id: "3", title: "API Integration", description: "Connect third-party services" },
	])

	return (
		<ReorderableList items={projects} onReorder={setProjects} className="space-y-2">
			{projects.map((project, index) => (
				<>
					<ReorderableSeparator key={`sep-${index}`} index={index} />
					<ReorderableItem key={project.id} index={index}>
						<Card className="cursor-default">
							<CardHeader className="flex flex-row items-center gap-3">
								<ReorderableTrigger asChild>
									<button className="cursor-move p-1 hover:bg-accent rounded">
										<GripVertical className="h-5 w-5 text-muted-foreground" />
									</button>
								</ReorderableTrigger>
								<div>
									<CardTitle>{project.title}</CardTitle>
									<CardDescription>{project.description}</CardDescription>
								</div>
							</CardHeader>
						</Card>
					</ReorderableItem>
				</>
			))}
			<ReorderableSeparator index={projects.length} />
		</ReorderableList>
	)
}