feat: column manager

2024-03-18 10:50:08 +07:00
parent c8e014f33e
commit 05b52564e0
17 changed files with 269 additions and 87 deletions
@@ -0,0 +1,39 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export function Toolbar({
+  moveLeft,
+  moveRight,
+}: {
+  moveLeft: () => void;
+  moveRight: () => void;
+}) {
+  const [domReady, setDomReady] = useState(false);
+
+  useEffect(() => {
+    setDomReady(true);
+  }, []);
+
+  return domReady
+    ? createPortal(
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => moveLeft()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowLeftIcon className="size-5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveRight()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowRightIcon className="size-5" />
+          </button>
+        </div>,
+        document.getElementById("toolbar"),
+      )
+    : null;
+}