Resizable

1"use client";
2 
3import * as React from "react";
4import type { ReactNode } from "react";
5import { GripVertical } from "lucide-react";
6import * as ResizablePrimitive from "react-resizable-panels";
7 
8import { cn } from "@/lib/utils";
9 
10function ResizablePanelGroup({
11  className,
12  ...props
13}: ResizablePrimitive.GroupProps) {
14  return (
15    <ResizablePrimitive.Group
16      data-slot="resizable-panel-group"
17      className={cn(
18        "flex h-full w-full aria-[orientation=vertical]:flex-col",
19        className,
20      )}
21      {...props}
22    />
23  );
24}
25 
26const ResizablePanel = React.forwardRef<
27  ResizablePrimitive.PanelImperativeHandle,
28  ResizablePrimitive.PanelProps
29>(function ResizablePanel(props, ref) {
30  return (
31    <ResizablePrimitive.Panel
32      data-slot="resizable-panel"
33      panelRef={ref}
34      {...props}
35    />
36  );
37});
38 
39function ResizableHandle({
40  withHandle,
41  className,
42  ...props
43}: ResizablePrimitive.SeparatorProps & {
44  withHandle?: boolean | ReactNode;
45}) {
46  return (
47    <ResizablePrimitive.Separator
48      data-slot="resizable-handle"
49      className={cn(
50        "flex items-center justify-center",
51        "bg-border relative isolate w-px",
52        "after:absolute after:inset-y-0 after:left-1/2 after:z-20 after:w-3 after:-translate-x-1/2",
53        "focus-visible:ring-ring focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden",
54        "aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full [&[aria-orientation=horizontal]>div]:rotate-90",
55        "aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-3 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2",
56        className,
57      )}
58      {...props}
59    >
60      {withHandle &&
61        (typeof withHandle === "boolean" ? (
62          <div className="bg-background text-foreground relative z-30 flex h-4 w-3 items-center justify-center rounded-xs border opacity-100 shadow-sm">
63            <GripVertical className="size-2.5" />
64          </div>
65        ) : (
66          withHandle
67        ))}
68    </ResizablePrimitive.Separator>
69  );
70}
71 
72export { ResizableHandle, ResizablePanel, ResizablePanelGroup };