resizable

1"use client"
2 
3import * as ResizablePrimitive from "react-resizable-panels"
4 
5import { cn } from "@/lib/utils"
6 
7function ResizablePanelGroup({
8  className,
9  ...props
10}: ResizablePrimitive.GroupProps) {
11  return (
12    <ResizablePrimitive.Group
13      data-slot="resizable-panel-group"
14      className={cn(
15        "flex h-full w-full aria-[orientation=vertical]:flex-col",
16        className
17      )}
18      {...props}
19    />
20  )
21}
22 
23function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
24  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
25}
26 
27function ResizableHandle({
28  withHandle,
29  className,
30  ...props
31}: ResizablePrimitive.SeparatorProps & {
32  withHandle?: boolean
33}) {
34  return (
35    <ResizablePrimitive.Separator
36      data-slot="resizable-handle"
37      className={cn(
38        "relative flex w-px 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:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
39        className
40      )}
41      {...props}
42    >
43      {withHandle && (
44        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
45      )}
46    </ResizablePrimitive.Separator>
47  )
48}
49 
50export { ResizableHandle, ResizablePanel, ResizablePanelGroup }