Draggable List

1"use client";
2 
3import { Reorder } from "framer-motion";
4import { GripVertical } from "lucide-react";
5import { useState } from "react";
6 
7const initialItems = [
8  { id: 1, text: "First item" },
9  { id: 2, text: "Second item" },
10  { id: 3, text: "Third item" },
11  { id: 4, text: "Fourth item" },
12];
13 
14export function DraggableList() {
15  const [items, setItems] = useState(initialItems);
16 
17  return (
18    <Reorder.Group
19      axis="y"
20      values={items}
21      onReorder={setItems}
22      className="w-full max-w-md space-y-2"
23    >
24      {items.map((item) => (
25        <Reorder.Item
26          key={item.id}
27          value={item}
28          className="flex cursor-grab items-center gap-3 rounded-lg border  bg-[var(--card-bg)] p-4 active:cursor-grabbing"
29          whileDrag={{ scale: 1.05, boxShadow: "0 10px 30px rgba(0,0,0,0.2)" }}
30        >
31          <GripVertical className="h-5 w-5 text-[var(--foreground)]/40" />
32          <span className="text-sm">{item.text}</span>
33        </Reorder.Item>
34      ))}
35    </Reorder.Group>
36  );
37}