feat: revamp note creator

packages/app/src/Components/flyout.tsx

@@ -0,0 +1,54 @@
+import classNames from "classnames";
+import { CSSProperties, ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import IconButton from "@/Components/Button/IconButton";
+
+export default function Flyout({
+  show,
+  children,
+  title,
+  actions,
+  onClose,
+  side,
+  width,
+}: {
+  show: boolean;
+  title?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+  onClose: () => void;
+  side: "left" | "right";
+  width?: string;
+}) {
+  const styles = {
+    "--flyout-w": width ?? "400px",
+    transition: "all 0.2s ease-in-out",
+    width: "var(--flyout-w)",
+    transform:
+      side === "right"
+        ? `translate(${show ? "0" : "var(--flyout-w)"},0)`
+        : `translate(${show ? "0" : "calc(-1 * var(--flyout-w))"},0)`,
+  } as CSSProperties;
+
+  return createPortal(
+    <div
+      className={classNames("absolute top-0 overflow-hidden z-50", {
+        "pointer-events-none": !show,
+        "right-0": side == "right",
+        "left-0": side === "left",
+      })}>
+      <div className="bg-gray-superdark px-3 py-4 h-[100vh] top-0" style={styles}>
+        <div className="flex justify-between items-center">
+          {title}
+          <div className="flex gap-2 items-center">
+            {actions}
+            <IconButton icon={{ name: "x" }} onClick={onClose} />
+          </div>
+        </div>
+        {children}
+      </div>
+    </div>,
+    document.body,
+  ) as React.ReactNode;
+}