add nextui

packages/client-next/src/components/CanvasMeta.tsx

@@ -0,0 +1,62 @@
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+  useDisclosure,
+} from "@nextui-org/react";
+import { useAppContext } from "../contexts/AppContext";
+
+export const CanvasMeta = () => {
+  const { canvasPosition } = useAppContext();
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+  return (
+    <>
+      <div id="canvas-meta">
+        {canvasPosition && (
+          <span>
+            <button className="btn-link" onClick={onOpen}>
+              ({canvasPosition.x}, {canvasPosition.y})
+            </button>
+          </span>
+        )}
+        <span>
+          Pixels: <span>123</span>
+        </span>
+        <span>
+          Users Online: <span>321</span>
+        </span>
+      </div>
+      <ShareModal isOpen={isOpen} onOpenChange={onOpenChange} />
+    </>
+  );
+};
+
+const ShareModal = ({
+  isOpen,
+  onOpenChange,
+}: {
+  isOpen: boolean;
+  onOpenChange: () => void;
+}) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent>
+        {() => (
+          <>
+            <ModalHeader className="flex flex-col gap-1">
+              share modal
+            </ModalHeader>
+            <ModalBody>
+              <p>share the current zoom level & position as a url</p>
+              <p>
+                params would be not a hash so the server can generate an oembed
+              </p>
+            </ModalBody>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

packages/client-next/src/components/Header.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export const Header = () => {
   return (
-    <header>
+    <header id="main-header">
       <div></div>
       <div className="spacer"></div>
       <div className="box">

packages/client-next/src/components/Pallete.tsx

@@ -4,6 +4,7 @@ import { Canvas } from "../lib/canvas";
 import { IPalleteContext } from "../types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { CanvasMeta } from "./CanvasMeta";
 
 export const Pallete = () => {
   const { config, user } = useAppContext();
@@ -66,25 +67,3 @@ export const Pallete = () => {
     </div>
   );
 };
-
-export const CanvasMeta = () => {
-  const { canvasPosition } = useAppContext();
-
-  return (
-    <div id="canvas-meta">
-      {canvasPosition && (
-        <span>
-          <button className="btn-link">
-            ({canvasPosition.x}, {canvasPosition.y})
-          </button>
-        </span>
-      )}
-      <span>
-        Pixels: <span>123</span>
-      </span>
-      <span>
-        Users Online: <span>321</span>
-      </span>
-    </div>
-  );
-};

packages/client-next/src/style.scss

@@ -10,13 +10,11 @@ html,
 body {
   overscroll-behavior: contain;
   touch-action: none;
+
+  background-color: #ddd !important;
 }
 
-body {
+header#main-header {
-  background-color: #ddd;
-}
-
-header {
   position: fixed;
   top: 0;
   left: 0;

packages/client-next/tailwind.config.js

@@ -7,6 +7,7 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "../../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},