Resizable

1import Resizable from "corvu/resizable";
2import { GripVertical } from "lucide-solid";
3import type { Component, ComponentProps } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7const ResizablePanelGroup: Component<ComponentProps<typeof Resizable>> = (props) => {
8  const [local, rest] = splitProps(props, ["class"]);
9  return (
10    <Resizable
11      class={cn("flex h-full w-full data-[orientation=vertical]:flex-col", local.class)}
12      {...rest}
13    />
14  );
15};
16 
17const ResizablePanel = Resizable.Panel;
18 
19const ResizableHandle: Component<
20  ComponentProps<typeof Resizable.Handle> & { withHandle?: boolean }
21> = (props) => {
22  const [local, rest] = splitProps(props, ["class", "withHandle"]);
23  return (
24    <Resizable.Handle
25      class={cn(
26        "relative flex w-px items-center justify-center bg-border",
27        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
28        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
29        "data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full",
30        "data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1",
31        "data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2",
32        "data-[orientation=vertical]:after:translate-x-0",
33        "[&[data-orientation=vertical]>div]:rotate-90",
34        local.class,
35      )}
36      {...rest}
37    >
38      {local.withHandle && (
39        <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
40          <GripVertical class="h-2.5 w-2.5" />
41        </div>
42      )}
43    </Resizable.Handle>
44  );
45};
46 
47export { ResizablePanelGroup, ResizablePanel, ResizableHandle };