wip: tired...

packages/ui/src/column/root.tsx

@@ -0,0 +1,37 @@
+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>
+	);
+}