| 1 | "use client"; |
| 2 | |
| 3 | import * as React from "react"; |
| 4 | |
| 5 | import { GripVertical } from "lucide-react"; |
| 6 | import { |
| 7 | Resizable as BaseResizable, |
| 8 | type Resizable as BaseResizableInstance, |
| 9 | type ResizableProps, |
| 10 | } from "re-resizable"; |
| 11 | import * as ResizablePanels from "react-resizable-panels"; |
| 12 | |
| 13 | import { cn } from "@/lib/utils"; |
| 14 | |
| 15 | const BaseResizableComponent = |
| 16 | BaseResizable as unknown as React.ComponentType< |
| 17 | ResizableProps & React.RefAttributes<BaseResizableInstance> |
| 18 | >; |
| 19 | |
| 20 | export const ResizablePanelGroup = ({ |
| 21 | className, |
| 22 | ...props |
| 23 | }: React.ComponentProps<typeof ResizablePanels.PanelGroup>) => ( |
| 24 | <ResizablePanels.PanelGroup |
| 25 | className={cn( |
| 26 | "flex h-full w-full data-[panel-group-direction=vertical]:flex-col", |
| 27 | className, |
| 28 | )} |
| 29 | {...props} |
| 30 | /> |
| 31 | ); |
| 32 | |
| 33 | export const ResizablePanel = ResizablePanels.Panel; |
| 34 | |
| 35 | export const ResizableHandle = ({ |
| 36 | withHandle, |
| 37 | className, |
| 38 | ...props |
| 39 | }: React.ComponentProps<typeof ResizablePanels.PanelResizeHandle> & { |
| 40 | withHandle?: boolean; |
| 41 | }) => ( |
| 42 | <ResizablePanels.PanelResizeHandle |
| 43 | className={cn( |
| 44 | "relative flex w-px items-center justify-center bg-border", |
| 45 | "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", |
| 46 | "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1", |
| 47 | "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full", |
| 48 | "data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:left-0", |
| 49 | "data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full", |
| 50 | "data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0", |
| 51 | className, |
| 52 | )} |
| 53 | {...props} |
| 54 | > |
| 55 | {withHandle && ( |
| 56 | <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border"> |
| 57 | <GripVertical className="h-2.5 w-2.5" /> |
| 58 | </div> |
| 59 | )} |
| 60 | </ResizablePanels.PanelResizeHandle> |
| 61 | ); |
| 62 | |
| 63 | export const Resizable = React.forwardRef<BaseResizableInstance, ResizableProps>( |
| 64 | function Resizable(props, ref) { |
| 65 | return <BaseResizableComponent ref={ref} {...props} />; |
| 66 | }, |
| 67 | ); |
| 68 | |
| 69 | export type ResizableInstance = BaseResizableInstance; |
| 70 | |
| 71 | export type { ResizableProps }; |
| 72 |