Resizable

1"use client";
2 
3import * as React from "react";
4import * as ResizablePrimitive from "react-resizable-panels";
5 
6import { cn } from "@/lib/utils";
7 
8function ResizablePanelGroup({ className = "", ...props }) {
9	return (
10		<ResizablePrimitive.PanelGroup
11			data-slot="resizable-panel-group"
12			className={cn(
13				"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
14				className,
15			)}
16			{...props}
17		/>
18	);
19}
20 
21function ResizablePanel({ ...props } = {}) {
22	return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
23}
24 
25function ResizableHandle({ withHandle = false, className = "", ...props }) {
26	return (
27		<ResizablePrimitive.PanelResizeHandle
28			data-slot="resizable-handle"
29			className={cn(
30				"bg-border focus-visible:ring-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",
31				className,
32			)}
33			{...props}
34		>
35			{withHandle && (
36				<div className="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" />
37			)}
38		</ResizablePrimitive.PanelResizeHandle>
39	);
40}
41 
42ResizablePanelGroup.displayName = "ResizablePanelGroup";
43ResizablePanel.displayName = "ResizablePanel";
44ResizableHandle.displayName = "ResizableHandle";
45 
46export { ResizablePanelGroup, ResizablePanel, ResizableHandle };