| 21 | const ResizablePanel = ResizablePrimitive.Panel |
| 22 | |
| 23 | const ResizableHandle = ({ |
| 24 | withHandle, |
| 25 | className, |
| 26 | ...props |
| 27 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { |
| 28 | withHandle?: boolean |
| 29 | }) => ( |
| 30 | <ResizablePrimitive.PanelResizeHandle |
| 31 | className={cn( |
| 32 | "relative flex w-px items-center justify-center bg-border", |
| 33 | "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", |
| 34 | "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1", |
| 35 | "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", |
| 36 | className |
| 37 | )} |
| 38 | {...props} |
| 39 | > |
| 40 | {withHandle && ( |
| 41 | <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"> |
| 42 | <GripVertical className="h-2.5 w-2.5" /> |
| 43 | </div> |
| 44 | )} |
| 45 | </ResizablePrimitive.PanelResizeHandle> |
| 46 | ) |
| 47 | |
| 48 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle } |