list

1"use client";
2 
3import {
4  DndContext,
5  type DragEndEvent,
6  rectIntersection,
7  useDraggable,
8  useDroppable,
9} from "@dnd-kit/core";
10import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
11import type { ReactNode } from "react";
12import { cn } from "@/lib/utils";
13 
14export type { DragEndEvent } from "@dnd-kit/core";
15 
16type Status = {
17  id: string;
18  name: string;
19  color: string;
20};
21 
22type Feature = {
23  id: string;
24  name: string;
25  startAt: Date;
26  endAt: Date;
27  status: Status;
28};
29 
30export type ListItemsProps = {
31  children: ReactNode;
32  className?: string;
33};
34 
35export const ListItems = ({ children, className }: ListItemsProps) => (
36  <div className={cn("flex flex-1 flex-col gap-2 p-3", className)}>
37    {children}
38  </div>
39);
40 
41export type ListHeaderProps =
42  | {
43      children: ReactNode;
44    }
45  | {
46      name: Status["name"];
47      color: Status["color"];
48      className?: string;
49    };
50 
51export const ListHeader = (props: ListHeaderProps) =>
52  "children" in props ? (
53    props.children
54  ) : (
55    <div
56      className={cn(
57        "flex shrink-0 items-center gap-2 bg-foreground/5 p-3",
58        props.className
59      )}
60    >
61      <div
62        className="h-2 w-2 rounded-full"
63        style={{ backgroundColor: props.color }}
64      />
65      <p className="m-0 font-semibold text-sm">{props.name}</p>
66    </div>
67  );
68 
69export type ListGroupProps = {
70  id: Status["id"];
71  children: ReactNode;
72  className?: string;
73};
74 
75export const ListGroup = ({ id, children, className }: ListGroupProps) => {
76  const { setNodeRef, isOver } = useDroppable({ id });
77 
78  return (
79    <div
80      className={cn(
81        "bg-secondary transition-colors",
82        isOver && "bg-foreground/10",
83        className
84      )}
85      ref={setNodeRef}
86    >
87      {children}
88    </div>
89  );
90};
91 
92export type ListItemProps = Pick<Feature, "id" | "name"> & {
93  readonly index: number;
94  readonly parent: string;
95  readonly children?: ReactNode;
96  readonly className?: string;
97};
98 
99export const ListItem = ({
100  id,
101  name,
102  index,
103  parent,
104  children,
105  className,
106}: ListItemProps) => {
107  const { attributes, listeners, setNodeRef, transform, isDragging } =
108    useDraggable({
109      id,
110      data: { index, parent },
111    });
112 
113  return (
114    <div
115      className={cn(
116        "flex cursor-grab items-center gap-2 rounded-md border bg-background p-2 shadow-sm",
117        isDragging && "cursor-grabbing",
118        className
119      )}
120      style={{
121        transform: transform
122// … truncated