Drag Handle List

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2, GripVertical, ChevronDown, ChevronUp } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function DragHandleListSection() {
29  const [items, setItems] = useState([
30    { id: '1', title: 'Design system setup', priority: 'High' },
31    { id: '2', title: 'Component library', priority: 'Medium' },
32    { id: '3', title: 'API integration', priority: 'High' },
33    { id: '4', title: 'Testing suite', priority: 'Low' },
34    { id: '5', title: 'Documentation', priority: 'Medium' },
35  ]);
36
37  const moveItem = (from: number, to: number) => {
38    const updated = [...items];
39    const [moved] = updated.splice(from, 1);
40    updated.splice(to, 0, moved);
41    setItems(updated);
42  };
43
44  const priorityColor = (p: string) => {
45    switch (p) {
46      case 'High': return 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500';
47      case 'Medium': return 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-warning-500';
48      default: return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
49    }
50  };
51
52  return (
53    <SectionCard title="Drag Handle List" sourceSlug="/ui/source/ui-elements/drag-handle-list">
54      <div className="max-w-md space-y-2">
55        {items.map((item, index) => (
56          <div key={item.id} className="flex items-center gap-3 rounded-xl border border-gray-200 bg-white px-3 py-2.5 dark:border-white/5 dark:bg-gray-dark">
57            <GripVertical className="size-4 text-gray-400 cursor-grab" />
58            <div className="flex-1 min-w-0">
59              <p className="text-sm font-medium text-gray-800 dark:text-white/90 truncate">{item.title}</p>
60            </div>
61            <span className={`rounded-md px-2 py-0.5 text-[10px] font-medium ${priorityColor(item.priority)}`}>{item.priority}</span>
62            <div className="flex gap-1">
63              <button onClick={() => index > 0 && moveItem(index, index - 1)} disabled={index === 0} className="text-gray-400 hover:text-brand-500 disabled:opacity-30 transition-colors">
64                <ChevronUp className="size-3.5" />
65              </button>
66              <button onClick={() => index < items.length - 1 && moveItem(index, index + 1)} disabled={index === items.length - 1} className="text-gray-400 hover:text-brand-500 disabled:opacity-30 transition-colors">
67                <ChevronDown className="size-3.5" />
68              </button>
69            </div>
70          </div>
71        ))}
72      </div>
73    </SectionCard>
74  );
75}