resizable

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