Resizable

1"use client";
2 
3import { GripVertical } from "lucide-react";
4import { forwardRef } from "react";
5import { Group, Panel, Separator } from "react-resizable-panels";
6import { cn } from "@/lib/utils";
7 
8export const ResizablePanelGroup = ({
9  className,
10  orientation = "horizontal",
11  ...props
12}: React.ComponentProps<typeof Group> & {
13  orientation?: "horizontal" | "vertical";
14}) => (
15  <Group
16    orientation={orientation}
17    className={cn(
18      "flex h-full w-full data-[orientation=vertical]:flex-col",
19      className,
20    )}
21    {...props}
22  />
23);
24 
25export const ResizablePanel = Panel;
26 
27export const ResizableHandle = forwardRef<
28  HTMLDivElement,
29  React.ComponentProps<typeof Separator> & {
30    withHandle?: boolean;
31  }
32>(({ withHandle, className, ...props }, ref) => (
33  <Separator
34    elementRef={ref}
35    className={cn(
36      "relative flex w-px items-center justify-center bg-black/10 dark:bg-white/15 outline-none transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-4 after:-translate-x-1/2 focus-visible:ring-2 focus-visible:ring-blue-500/40 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full",
37      className,
38    )}
39    {...props}
40  >
41    {withHandle && (
42      <div className="z-10 flex h-7 w-4 items-center justify-center rounded-md border border-black/10 dark:border-white/15 bg-black/[0.04] dark:bg-white/[0.06] shadow-sm">
43        <GripVertical className="size-3.5 text-current/50" aria-hidden />
44      </div>
45    )}
46  </Separator>
47));
48ResizableHandle.displayName = "ResizableHandle";