From f66355c83584d851772484d8af94bbedf59702bd Mon Sep 17 00:00:00 2001
From: Alex Wellnitz <moin@wellnitz-alex.de>
Date: Tue, 24 Sep 2024 10:26:34 +0200
Subject: [PATCH] feat(frontend): restructure of ui snippets

---
 frontend/next.config.mjs         |  3 ++
 frontend/src/app/page.module.css |  8 +++-
 frontend/src/app/page.tsx        | 76 ++------------------------------
 frontend/src/app/ui/footer.tsx   | 51 +++++++++++++++++++++
 frontend/src/app/ui/intro.tsx    | 34 ++++++++++++++
 5 files changed, 99 insertions(+), 73 deletions(-)
 create mode 100644 frontend/src/app/ui/footer.tsx
 create mode 100644 frontend/src/app/ui/intro.tsx

diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index 4350313..5ebb000 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;
diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css
index c649bba..8ea5b78 100644
--- a/frontend/src/app/page.module.css
+++ b/frontend/src/app/page.module.css
@@ -32,7 +32,9 @@
     flex-direction: column;
     gap: 32px;
     grid-row-start: 2;
-    min-width: 1280px;
+    width: 100%;
+    min-width: 1080px;
+    max-width: 1300px;
 }
 
 .main ol {
@@ -57,6 +59,10 @@
     font-weight: 600;
 }
 
+.main .intro {
+    margin: auto;
+}
+
 .ctas {
     display: flex;
     gap: 16px;
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 84c9da8..3f67b1b 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,80 +1,12 @@
-import Image from "next/image";
 import styles from "./page.module.css";
-import { SimCurrentGear } from "./ui/forms/simCurrentGear";
+import { Intro } from "./ui/intro";
+import { Footer } from "./ui/footer";
 
 export default function Home() {
   return (
     <div className={styles.page}>
-      <main className={styles.main}>
-        <a href="/" style={{ margin: "auto" }}>
-          <img
-            className={styles.logo}
-            src={`/img/warcraft-icon-22.png`}
-            alt="Sim-Free Logo"
-            width={150}
-            height={150}
-            // priority
-          />
-        </a>
-        <ol>
-          <li>
-            Copy/paste the text from the SimulationCraft addon. {}
-            <a
-              className={styles.primary}
-              target="_blank"
-              href="https://github.com/simulationcraft/simc-addon"
-            >
-              How to install and use the SimC addon
-            </a>
-          </li>
-          <li>Select pieces of gear and Sim-Free will sim them</li>
-        </ol>
-        <SimCurrentGear />
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://github.com/alexohneander/sim_free/issues/new"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Issues
-        </a>
-        <a
-          href="https://github.com/alexohneander/sim_free/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Project
-        </a>
-        <a
-          href="https://alexohneander.de"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to alexohneander.de →
-        </a>
-      </footer>
+      <Intro />
+      <Footer />
     </div>
   );
 }
diff --git a/frontend/src/app/ui/footer.tsx b/frontend/src/app/ui/footer.tsx
new file mode 100644
index 0000000..27adbe3
--- /dev/null
+++ b/frontend/src/app/ui/footer.tsx
@@ -0,0 +1,51 @@
+import Image from "next/image";
+import styles from "../page.module.css";
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <a
+        href="https://github.com/alexohneander/sim_free/issues/new"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Image
+          aria-hidden
+          src="https://nextjs.org/icons/file.svg"
+          alt="File icon"
+          width={16}
+          height={16}
+        />
+        Issues
+      </a>
+      <a
+        href="https://github.com/alexohneander/sim_free/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Image
+          aria-hidden
+          src="https://nextjs.org/icons/window.svg"
+          alt="Window icon"
+          width={16}
+          height={16}
+        />
+        Project
+      </a>
+      <a
+        href="https://alexohneander.de"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Image
+          aria-hidden
+          src="https://nextjs.org/icons/globe.svg"
+          alt="Globe icon"
+          width={16}
+          height={16}
+        />
+        Go to alexohneander.de →
+      </a>
+    </footer>
+  );
+}
diff --git a/frontend/src/app/ui/intro.tsx b/frontend/src/app/ui/intro.tsx
new file mode 100644
index 0000000..6d88974
--- /dev/null
+++ b/frontend/src/app/ui/intro.tsx
@@ -0,0 +1,34 @@
+import Image from "next/image";
+import styles from "../page.module.css";
+import { SimCurrentGear } from "./forms/simCurrentGear";
+
+export function Intro() {
+  return (
+    <main className={styles.main}>
+      <a href="/" style={{ margin: "auto" }}>
+        <Image
+          className={styles.logo}
+          src={`https://sim-free.dev-null.rocks/img/warcraft-icon-22.png`}
+          alt="Sim-Free Logo"
+          width={150}
+          height={150}
+          priority
+        />
+      </a>
+      <ol>
+        <li>
+          Copy/paste the text from the SimulationCraft addon. {}
+          <a
+            className={styles.primary}
+            target="_blank"
+            href="https://github.com/simulationcraft/simc-addon"
+          >
+            How to install and use the SimC addon
+          </a>
+        </li>
+        <li>Select pieces of gear and Sim-Free will sim them</li>
+      </ol>
+      <SimCurrentGear />
+    </main>
+  );
+}