Resizable

1"use client";
2
3import * as ResizablePrimitive from "react-resizable-panels";
4
5import { cn } from "@/lib/utils";
6
7function ResizablePanelGroup({
8  className,
9  ...props
10}: ResizablePrimitive.GroupProps) {
11  return (
12    <ResizablePrimitive.Group
13      data-slot="resizable-panel-group"
14      className={cn(
15        "flex h-full w-full aria-[orientation=vertical]:flex-col",
16        className
17      )}
18      {...props}
19    />
20  );
21}
22
23function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
24  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
25}
26
27function ResizableHandle({
28  withHandle,
29  className,
30  ...props
31}: ResizablePrimitive.SeparatorProps & {
32  withHandle?: boolean;
33}) {
34  return (
35    <ResizablePrimitive.Separator
36      data-slot="resizable-handle"
37      className={cn(
38        "bg-border focus-visible:ring-ring ring-offset-background 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:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
39        className
40      )}
41      {...props}
42    >
43      {withHandle && (
44        <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
45      )}
46    </ResizablePrimitive.Separator>
47  );
48}
49
50export { ResizableHandle, ResizablePanel, ResizablePanelGroup };