Resizable

1"use client";
2 
3import { GripVertical } from "lucide-react";
4import * as ResizablePrimitive from "react-resizable-panels";
5 
6import { cn } from "@/lib/utils";
7 
8function ResizablePanelGroup({
9  className,
10  ...props
11}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
12  return (
13    <ResizablePrimitive.PanelGroup
14      data-slot="resizable-panel-group"
15      className={cn(
16        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
17        className,
18      )}
19      {...props}
20    />
21  );
22}
23 
24const ResizablePanel = ResizablePrimitive.Panel;
25 
26function ResizableHandle({
27  withHandle,
28  className,
29  ...props
30}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
31  withHandle?: boolean;
32}) {
33  return (
34    <ResizablePrimitive.PanelResizeHandle
35      data-slot="resizable-handle"
36      className={cn(
37        "group relative flex w-px items-center justify-center bg-border outline-none transition-colors focus-visible:bg-primary data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full [&[data-panel-group-direction=vertical]>div]:rotate-90",
38        className,
39      )}
40      {...props}
41    >
42      {withHandle && (
43        <div className="z-10 grid h-8 w-5 place-items-center rounded-lg border border-foreground/12 bg-background text-muted-foreground shadow-sm transition-[color,border-color,transform] group-hover:border-primary/30 group-hover:text-primary group-data-[resize-handle-active]:scale-105">
44          <GripVertical className="size-3" />
45        </div>
46      )}
47    </ResizablePrimitive.PanelResizeHandle>
48  );
49}
50 
51export { ResizableHandle, ResizablePanel, ResizablePanelGroup };