Resizable

1import { Resizable, ResizablePanel, ResizableResizeTrigger } from "@/components/ui/resizable";
2
3<Resizable />

1"use client";
2
3import {
4  Splitter as ArkSplitter,
5  useSplitterContext,
6} from "@ark-ui/react/splitter";
7import { GripVertical } from "lucide-react";
8import type React from "react";
9import { cn } from "@/lib/utils";
10
11export const useResizable = useSplitterContext;
12
13export const Resizable = (
14  props: React.ComponentProps<typeof ArkSplitter.Root>
15) => {
16  const { className, ...rest } = props;
17
18  return (
19    <ArkSplitter.Root
20      className={cn("flex size-full", className)}
21      data-slot="resizable"
22      {...rest}
23    />
24  );
25};
26
27export const ResizablePanel = (
28  props: React.ComponentProps<typeof ArkSplitter.Panel>