Layout Demo

src/App.tsx

@@ -1,14 +1,49 @@
-import './App.css'
+import { useState } from "react";
-import Background from './components/background'
+import "./App.css";
+import Background from "./components/background";
+import Commission from "./components/page/commission";
+import Link from "./components/page/link";
+import Refsheet from "./components/page/refsheet";
+import LinkRow from "./components/linkrow";
+import { Button } from "./components/common/Button";
 
 function App() {
+  console.log("Loading app");
+  const [page, setPage] = useState("Links");
+  const changePage = (page: string) => {
+    setPage(page);
+  };
   return (
     <>
-    <Background>
+      <Background>
-      <div></div>
+        <header>
-    </Background>
+          <h1>Kalon the Bee</h1>
+          <LinkRow>
+            <Button label="Links" onClick={() => changePage("Links")} />
+            <Button
+              label="Commission"
+              onClick={() => changePage("Commission")}
+            ></Button>
+            <Button
+              label="Refsheet"
+              onClick={() => changePage("Refsheet")}
+            ></Button>
+          </LinkRow>
+        </header>
+        {page === "Links" ? (
+          <Link />
+        ) : page === "Commission" ? (
+          <Commission />
+        ) : page === "Refsheet" ? (
+          <Refsheet />
+        ) : (
+          <div>
+            <p>Error, no page found</p>
+          </div>
+        )}
+      </Background>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/background.tsx

@@ -1,27 +1,15 @@
-import React from "react"
+import React from "react";
 
-const Background: React.FC<{children: React.ReactNode }> = ({ children }) => {
+const Background: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    return (
+  return (
-        <div className="relative min-h-screen min-w-screen flex items-center justify-center p-4 bg-amber-500 overflow-hidden">
+    <div className="relative min-h-screen min-w-screen flex items-center justify-center p-4 bg-white ">
-            <div className="absolute inset-0 flex flex-wrap justify-center items-start">
+      <div className="absolute inset-0 flex flex-wrap justify-center items-center">
-            {Array.from({ length: 20}).map((_, row) => (
+        <div className="relative bg-amber-200 border-16 border-amber-500 rounded-2xl shadow-lg p-8 h-150 w-150 text-center">
-                <div key={row} className="flex">
+          {children}
-                    {Array.from({ length: 10}).map((_, col) => (
-                        <div key={col}
-                            className="w-12 h-14 bg-amber-300"
-                            style={{
-                                clipPath: "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)",
-                                transform: row % 2 === 0 ? "translateX(50%)" : "none",
-                            }}>
-                        </div>
-                    ))}
-                </div>
-            ))}
-        
-        </div>    
-            <div className="relative bg-white rounded-2xl shadow-lg p-8 h-100 w-200 text-center">{children}</div>
         </div>
-    )
+      </div>
-}
+    </div>
+  );
+};
 
-export default Background
+export default Background;

src/components/common/Button.tsx

@@ -0,0 +1,14 @@
+interface ButtonParams {
+  label: string;
+  onClick: () => void;
+}
+
+export const Button = ({ label, onClick }: ButtonParams) => {
+  return (
+    <div>
+      <a className="" onClick={() => onClick()}>
+        {label}
+      </a>
+    </div>
+  );
+};

src/components/linkrow.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const LinkRow: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div className="w-full p-2 flex items-center justify-between gap-2 border-2 border-amber-500 rounded-full">
+      {React.Children.map(children, (child, index) => (
+        <>
+          {index > 0 && <div className="h-6 w-0.5 bg-amber-500" />}
+          <div key={index} className="px-2">
+            {child}
+          </div>
+        </>
+      ))}
+    </div>
+  );
+};
+
+export default LinkRow;

src/components/page/commission.tsx

@@ -0,0 +1,7 @@
+export default function Commission() {
+  return (
+    <div>
+      <p>Commission stuff eventually</p>
+    </div>
+  );
+}

src/components/page/link.tsx

@@ -0,0 +1,7 @@
+export default function link() {
+  return (
+    <div>
+      <p>Link stuff eventually</p>
+    </div>
+  );
+}

src/components/page/refsheet.tsx

@@ -0,0 +1,7 @@
+export default function Refsheet() {
+  return (
+    <div>
+      <p>Refsheet stuff eventually</p>
+    </div>
+  );
+}

src/index.css

@@ -17,11 +17,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: #dfad08;
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: #c2aa23;
 }
 
 body {
@@ -33,6 +33,7 @@ body {
 }
 
 h1 {
+  color: #dfad08;
   font-size: 3.2em;
   line-height: 1.1;
 }

src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
+import { StrictMode } from "react";
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import './index.css'
+import "./index.css";
-import App from './App.tsx'
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
+  </StrictMode>
-)
+);