Resizable

1"use client"
2
3import { GripVertical } from "lucide-react"
4import * as ResizablePrimitive from "react-resizable-panels"
5
6import * as React from "react"
7
8import { cn } from "@/lib/utils"
9
10function ResizablePanelGroup({
11  className,
12  ...props
13}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
14  return (
15    <ResizablePrimitive.PanelGroup
16      data-slot="resizable-panel-group"
17      className={cn(
18        "flex h-full w-full font-base data-[panel-group-direction=vertical]:flex-col",
19        className,
20      )}
21      {...props}
22    />
23  )
24}
25
26function ResizablePanel({
27  className,
28  ...props
29}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
30  return (
31    <ResizablePrimitive.Panel
32      data-slot="resizable-panel"
33      className={cn(className)}
34      {...props}
35    />
36  )
37}
38
39function ResizableHandle({
40  withHandle,
41  className,
42  ...props
43}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
44  withHandle?: boolean
45}) {
46  return (
47    <ResizablePrimitive.PanelResizeHandle
48      data-slot="resizable-handle"
49      className={cn(
50        "relative flex w-0.5 items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-black focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-0.5 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
51        className,
52      )}
53      {...props}
54    >
55      {withHandle && (
56        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-base border bg-border">
57          <GripVertical className="size-2.5" />
58        </div>
59      )}
60    </ResizablePrimitive.PanelResizeHandle>
61  )
62}
63
64export { ResizablePanelGroup, ResizablePanel, ResizableHandle }