Resizable

1import { Slot } from '@radix-ui/react-slot';
2import { GripVertical } from 'lucide-react';
3import { PanelResizeHandle } from 'react-resizable-panels';
4import { cn } from '@/lib/utils';
5import { resizableVariants } from './resizable-variants';
6import type { ResizableHandleProps } from './types';
7 
8const ResizableHandle = (props: ResizableHandleProps) => {
9  const { children, className, classNames, size, withHandle, ...rest } = props;
10 
11  const { handle, handleIcon, handleIconRoot } = resizableVariants({ size });
12 
13  const mergedCls = {
14    handle: cn(handle(), className),
15    handleIcon: cn(handleIcon(), classNames?.handleIcon),
16    handleIconRoot: cn(handleIconRoot(), classNames?.handleIconRoot)
17  };
18 
19  return (
20    <PanelResizeHandle
21      className={mergedCls.handle}
22      {...rest}
23    >
24      {withHandle
25        ? (
26          <div className={mergedCls.handleIconRoot}>
27            <Slot className={mergedCls.handleIcon}>{children || <GripVertical />}</Slot>
28          </div>
29        )
30        : null}
31    </PanelResizeHandle>
32  );
33};
34 
35export default ResizableHandle;