Resizable

1
import type { DynamicProps, HandleProps, RootProps } from "@corvu/resizable";
2
import type { ValidComponent } from "solid-js";
3

4
import { Show, splitProps } from "solid-js";
5
import ResizablePrimitive from "@corvu/resizable";
6
import GripVerticalIcon from "lucide-solid/icons/grip-vertical";
7

8
import { cn } from "~/lib/utils";
9

10
type ResizableProps<T extends ValidComponent = "div"> = RootProps<T> & {
11
  class?: string;
12
};
13

14
const Resizable = <T extends ValidComponent = "div">(
15
  props: DynamicProps<T, ResizableProps<T>>,
16
) => {
17
  const [, rest] = splitProps(props as ResizableProps, ["class"]);
18
  return (
19
    <ResizablePrimitive
20
      data-slot="resizable"
21
      class={cn(
22
        "flex size-full data-[orientation=vertical]:flex-col",
23
        props.class,
24
      )}
25
      {...rest}
26
    />
27
  );
28
};
29

30
const ResizablePanel = ResizablePrimitive.Panel;
31

32
type ResizableHandleProps<T extends ValidComponent = "button"> =
33
  HandleProps<T> & {
34
    class?: string;
35
    withHandle?: boolean;
36
  };
37

38
const ResizableHandle = <T extends ValidComponent = "button">(
39
  props: DynamicProps<T, ResizableHandleProps<T>>,
40
) => {
41
  const [, rest] = splitProps(props as ResizableHandleProps, [
42
    "class",
43
    "withHandle",
44
  ]);
45
  return (
46
    <ResizablePrimitive.Handle
47
      data-slot="resizable-handle"
48
      class={cn(
49
        "relative flex w-px shrink-0 items-center justify-center bg-border 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-ring focus-visible:ring-offset-1 focus-visible:outline-none data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 data-[orientation=vertical]:after:-translate-y-1/2 [&[data-orientation=vertical]>div]:rotate-90",
50
        props.class,
51
      )}
52
      {...rest}
53
    >
54
      <Show when={props.withHandle}>
55
        <div
56
          data-slot="resizable-grip"
57
          class="z-10 flex h-5 w-4 items-center justify-center rounded-base border bg-primary text-primary-foreground"
58
        >
59
          <GripVerticalIcon class="size-3" />
60
        </div>
61
      </Show>
62
    </ResizablePrimitive.Handle>
63
  );
64
};
65

66
export { Resizable, ResizablePanel, ResizableHandle };