Layout Demo

src/components/background.tsx

@@ -1,27 +1,15 @@
-import React from "react"
+import React from "react";
 
-const Background: React.FC<{children: React.ReactNode }> = ({ children }) => {
-    return (
-        <div className="relative min-h-screen min-w-screen flex items-center justify-center p-4 bg-amber-500 overflow-hidden">
-            <div className="absolute inset-0 flex flex-wrap justify-center items-start">
-            {Array.from({ length: 20}).map((_, row) => (
-                <div key={row} className="flex">
-                    {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>
+const Background: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <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-center">
+        <div className="relative bg-amber-200 border-16 border-amber-500 rounded-2xl shadow-lg p-8 h-150 w-150 text-center">
+          {children}
         </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>
+  );
+}