Resizable panels component

packages/frontend/src/components/ui/resizable.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import type * as React from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof Group>) {
+    return (
+        <Group
+            data-slot="resizable-panel-group"
+            className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+            {...props}
+        />
+    );
+}
+
+function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>) {
+    return <Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableSeparator({
+    withHandle,
+    className,
+    ...props
+}: React.ComponentProps<typeof Separator> & {
+    withHandle?: boolean;
+}) {
+    return (
+        <Separator
+            data-slot="resizable-handle"
+            className={cn(
+                "relative flex w-1 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-0",
+                "focus-visible:ring-offset-0 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",
+                className,
+            )}
+            {...props}
+        >
+            {withHandle && (
+                <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+                    <GripVerticalIcon className="size-2.5" />
+                </div>
+            )}
+        </Separator>
+    );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableSeparator };