tcmd: Accordion and popover md elements

2024-02-28 21:41:12 -07:00
parent 2e9bfa1557
commit ff0a4280e2
22 changed files with 729 additions and 68 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,7 +8,6 @@
  }
  body {
    @apply dark:bg-mixed-100 bg-primary-600
-    /* background: linear-gradient(47deg, black, #620072, #120072); */
  }
  input {
    @apply py-2 px-4 rounded-full dark:bg-mixed-200 dark:bg-mixed-600 placeholder:text-dark-500
@@ -38,4 +37,11 @@
  .btn-secondary {
    @apply text-primary-500 py-4 px-6 font-bold text-lg
  }
+  .p {
+    @apply py-1
+  }
+
+  .poppable {
+    @apply card bg-mixed-300 p-2 rounded-lg transition-opacity data-[visible=true]:z-10 data-[visible=true]:opacity-100 data-[visible=false]:opacity-0 -z-10 max-w-[400px] absolute
+  }
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body className={inter.className + " flex min-h-[100vh]"}>
-        <nav className="h-[100vh] p-8 rounded-r-3xl dark:bg-mixed-300 bg-primary-400 w-max shadow-2xl">
+        <nav className="h-[100vh] fixed top-0 left-0 bottom-0 p-8 rounded-r-3xl dark:bg-mixed-300 bg-primary-400 w-max shadow-2xl">
          <h1 className="text-lg font-bold pb-6 border-b dark:border-dark-500 border-primary-600">
            Tabletop Commander
          </h1>
@@ -42,9 +42,10 @@ export default function RootLayout({
            </li>
          </ul>
        </nav>
-        <main className="p-8 w-full">
+        <main className="p-8 w-full ml-64">
          {children}
        </main>
+        <div id="root-portal"></div>
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import { readMD } from "@/actions/temp";
 import { TCMD } from "@/components/tcmd";
 import {
  BookOpenIcon,
@@ -16,7 +17,8 @@ export default function Home() {
        <h2 className="strapline">Tabletop Commander</h2>
        <h1 className="text-5xl font-bold">How does it work?</h1>
      </section>
-      <section className="w-full my-6">
+      {
+        /* <section className="w-full my-6">
        <div className="card">
          <p>
            Tabletop Commander (TC) is a rules-and-tools app for tabletop games
@@ -135,13 +137,11 @@ export default function Home() {
          will be done. If this makes it to production, tell Emma she forgot to
          turn the home page into magic
        </cite>
-      </section>
+      </section> */
+      }
      <Suspense>
        <TCMD
-          body={(async () => {
-            "use server";
-            return await readFile("./test.md", "utf-8");
-          })()}
+          body={readMD()}
        />
      </Suspense>
    </>