47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { GripVertical } from "lucide-react";
|
|
import * as ResizablePrimitive from "react-resizable-panels";
|
|
import { cn } from "./cn";
|
|
|
|
// shadcn/ui composition, adapted to this Vite application's paths and tokens.
|
|
export function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {
|
|
return (
|
|
<ResizablePrimitive.Group
|
|
data-slot="resizable-panel-group"
|
|
className={cn(
|
|
"flex h-full w-full min-h-0 min-w-0 aria-[orientation=vertical]:flex-col",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function ResizablePanel(props: ResizablePrimitive.PanelProps) {
|
|
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
|
|
}
|
|
|
|
export function ResizableHandle({
|
|
withHandle,
|
|
className,
|
|
...props
|
|
}: ResizablePrimitive.SeparatorProps & {
|
|
withHandle?: boolean;
|
|
}) {
|
|
return (
|
|
<ResizablePrimitive.Separator
|
|
data-slot="resizable-handle"
|
|
className={cn(
|
|
"resizable-handle relative flex w-px items-center justify-center bg-border focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{withHandle ? (
|
|
<span className="resizable-grip pointer-events-none z-10 flex h-8 w-3 shrink-0 items-center justify-center rounded border bg-background">
|
|
<GripVertical className="size-3" aria-hidden />
|
|
</span>
|
|
) : null}
|
|
</ResizablePrimitive.Separator>
|
|
);
|
|
}
|