38 lines
1011 B
TypeScript
38 lines
1011 B
TypeScript
import { cn } from "@lume/utils";
|
|
import { Resizable } from "re-resizable";
|
|
import { ReactNode, useState } from "react";
|
|
import { MemoryRouter, UNSAFE_LocationContext } from "react-router-dom";
|
|
|
|
export function ColumnRoot({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}) {
|
|
const [width, setWidth] = useState(420);
|
|
|
|
return (
|
|
<UNSAFE_LocationContext.Provider value={null}>
|
|
<Resizable
|
|
size={{ width, height: "100%" }}
|
|
onResizeStart={(e) => e.preventDefault()}
|
|
onResizeStop={(_e, _direction, _ref, d) => {
|
|
setWidth((prevWidth) => prevWidth + d.width);
|
|
}}
|
|
minWidth={420}
|
|
maxWidth={600}
|
|
className={cn(
|
|
"relative flex flex-col border-r-2 border-neutral-50 hover:border-neutral-100 dark:border-neutral-950 dark:hover:border-neutral-900",
|
|
className,
|
|
)}
|
|
enable={{ right: true }}
|
|
>
|
|
<MemoryRouter future={{ v7_startTransition: true }}>
|
|
{children}
|
|
</MemoryRouter>
|
|
</Resizable>
|
|
</UNSAFE_LocationContext.Provider>
|
|
);
|
|
}
|