import { GripVertical } from "lucide-react"; import { forwardRef } from "react"; import * as ResizablePrimitive from "react-resizable-panels"; import { cn } from "~/lib/utils"; import { BreakpointValues, useBreakpointValue, } from "~/hooks/useBreakpointValue"; type Direction = "horizontal" | "vertical"; type ResizablePanelGroupProps = Omit< React.ComponentProps, "direction" > & { direction: Direction | BreakpointValues; }; const ResizablePanelGroup = ({ className, direction, ...props }: ResizablePanelGroupProps) => { const directionValue = useBreakpointValue(direction); return ( ); }; type ResizablePanelProps = Omit< React.ComponentProps, "defaultSize" > & { defaultSize: number | BreakpointValues; defaultCollapsed?: boolean | BreakpointValues; }; const ResizablePanel = forwardRef((props: ResizablePanelProps, ref: any) => { const { defaultSize, defaultCollapsed, ...restProps } = props; const initialSize = useBreakpointValue(defaultSize); const initialCollapsed = useBreakpointValue(defaultCollapsed); return ( ); }); type ResizableHandleProps = React.ComponentProps< typeof ResizablePrimitive.PanelResizeHandle > & { withHandle?: boolean; }; const ResizableHandle = (props: ResizableHandleProps) => { const { withHandle, className, ...restProps } = props; return ( div]:rotate-90", withHandle && "w-3 bg-black group", className )} {...restProps} > {withHandle && (
)}
); }; export { ResizablePanelGroup, ResizablePanel, ResizableHandle };