"use client" import { GripVerticalIcon } from "lucide-react"import * as ResizablePrimitive from "react-resizable-panels" import { cn } from "../lib/utils" function ResizablePanelGroup({ className, ...props}: ResizablePrimitive.GroupProps) { return ( <ResizablePrimitive.Group data-slot="resizable-panel-group" className={cn( "flex h-full w-full aria-[orientation=vertical]:flex-col", className )} {...props} /> )} function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) { return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />} function ResizableHandle({ withHandle, className, ...props}: ResizablePrimitive.SeparatorProps & { withHandle?: boolean}) { return ( <ResizablePrimitive.Separator data-slot="resizable-handle" className={cn( "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:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden 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", className )} {...props} > {withHandle && ( <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border"> <GripVerticalIcon className="size-2.5" /> </div> )} </ResizablePrimitive.Separator> )} export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
"use client"
import { GripVerticalIcon } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "../lib/utils"
function ResizablePanelGroup({
className,
...props
}: ResizablePrimitive.GroupProps) {
return (
<ResizablePrimitive.Group
data-slot="resizable-panel-group"
className={cn(
"flex h-full w-full aria-[orientation=vertical]:flex-col",
className
)}
{...props}
/>
)
}
function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}
function ResizableHandle({
withHandle,
className,
...props
}: ResizablePrimitive.SeparatorProps & {
withHandle?: boolean
}) {
return (
<ResizablePrimitive.Separator
data-slot="resizable-handle"
className={cn(
"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:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden 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",
className
)}
{...props}
>
{withHandle && (
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
<GripVerticalIcon className="size-2.5" />
</div>
)}
</ResizablePrimitive.Separator>
)
}
export { ResizableHandle, ResizablePanel, ResizablePanelGroup }