From bebb27e600e92db2ddf8f81e0cb422f5940c989b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 31 Mar 2024 05:01:26 +0100
Subject: [PATCH] header and footer components

---
 app/page.module.css                       | 26 -----------------------
 app/page.tsx                              | 14 ++++++------
 components/Footer/Footer.module.css       | 22 +++++++++++++++++++
 components/Footer/Footer.tsx              | 18 ++++++++++++++++
 components/Footer/index.tsx               |  1 +
 components/Header/Header.module.css       | 15 +++++++++++++
 components/Header/Header.tsx              | 11 ++++++++++
 components/Header/index.tsx               |  1 +
 components/ResultRow/ResultRow.module.css |  9 +++++++-
 9 files changed, 82 insertions(+), 35 deletions(-)
 create mode 100644 components/Footer/Footer.module.css
 create mode 100644 components/Footer/Footer.tsx
 create mode 100644 components/Footer/index.tsx
 create mode 100644 components/Header/Header.module.css
 create mode 100644 components/Header/Header.tsx
 create mode 100644 components/Header/index.tsx

diff --git a/app/page.module.css b/app/page.module.css
index 1e781db..8c8dcaa 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -2,22 +2,6 @@
   flex: 1 0 auto;
 }
 
-.title,
-.description {
-  color: rgb(var(--foreground-rgb-highlight));
-  max-width: var(--max-width);
-  margin: auto;
-}
-
-.title {
-  font-size: clamp(1.3rem, 10vw, 2.5rem);
-  margin-top: 5vh;
-}
-
-.description {
-  font-size: clamp(1.1rem, 10vw, 1.5rem);
-}
-
 .grid {
   display: grid;
   gap: 1.5rem;
@@ -33,13 +17,3 @@
   max-width: calc(var(--max-width) * 1.5);
   margin: 3rem auto;
 }
-
-.footer {
-  flex-shrink: 0;
-  font-size: 0.8rem;
-  width: 100%;
-  max-width: var(--max-width);
-  margin: 3rem auto 0 auto;
-  padding-top: 2rem;
-  border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
-}
diff --git a/app/page.tsx b/app/page.tsx
index 0f9ace6..1f40f8c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,16 +1,15 @@
 import styles from './page.module.css'
-import { metadata } from './layout'
 import { Swap, Buy } from '@/components/Strategies'
 import { Content } from '@/components/Content'
 import { CalculationBase } from '@/components/CalculationBaseOutput'
+import { Header } from '@/components/Header'
+import { Footer } from '@/components/Footer'
 
 export default function Home() {
   return (
     <>
-      <header>
-        <h1 className={styles.title}>{`${metadata.title}`}</h1>
-        <p className={styles.description}>{`${metadata.description}`}</p>
-      </header>
+      <Header />
+
       <main className={styles.main}>
         <section className={styles.breakout}>
           <div className={styles.grid}>
@@ -22,9 +21,8 @@ export default function Home() {
 
         <Content />
       </main>
-      <footer className={styles.footer}>
-        Send ❤️ and memecoins to krema.eth
-      </footer>
+
+      <Footer />
     </>
   )
 }
diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css
new file mode 100644
index 0000000..5f5840f
--- /dev/null
+++ b/components/Footer/Footer.module.css
@@ -0,0 +1,22 @@
+.footer {
+  flex-shrink: 0;
+  font-size: 0.8rem;
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 3rem auto 0 auto;
+  padding-top: 2rem;
+  border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
+  color: rgba(var(--foreground-rgb), 0.6);
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer a {
+  color: rgba(var(--foreground-rgb), 0.8);
+}
+
+.social {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
new file mode 100644
index 0000000..118d10d
--- /dev/null
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,18 @@
+import { GitHubLogoIcon } from '@radix-ui/react-icons'
+import styles from './Footer.module.css'
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <span>
+        Send ❤️ and memecoins to <a href="">krema.eth</a>
+      </span>
+
+      <div className={styles.social}>
+        <a href="https://github.com/kremalicious/asi-calculator">
+          <GitHubLogoIcon />
+        </a>
+      </div>
+    </footer>
+  )
+}
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
new file mode 100644
index 0000000..bd2c119
--- /dev/null
+++ b/components/Footer/index.tsx
@@ -0,0 +1 @@
+export * from './Footer'
diff --git a/components/Header/Header.module.css b/components/Header/Header.module.css
new file mode 100644
index 0000000..5ecb8f6
--- /dev/null
+++ b/components/Header/Header.module.css
@@ -0,0 +1,15 @@
+.title,
+.description {
+  color: rgb(var(--foreground-rgb-highlight));
+  max-width: var(--max-width);
+  margin: auto;
+}
+
+.title {
+  font-size: clamp(1.3rem, 10vw, 2.5rem);
+  margin-top: 5vh;
+}
+
+.description {
+  font-size: clamp(1.1rem, 10vw, 1.5rem);
+}
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
new file mode 100644
index 0000000..7e150b7
--- /dev/null
+++ b/components/Header/Header.tsx
@@ -0,0 +1,11 @@
+import { metadata } from '@/app/layout'
+import styles from './Header.module.css'
+
+export function Header() {
+  return (
+    <header>
+      <h1 className={styles.title}>{`${metadata.title}`}</h1>
+      <p className={styles.description}>{`${metadata.description}`}</p>
+    </header>
+  )
+}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
new file mode 100644
index 0000000..f887995
--- /dev/null
+++ b/components/Header/index.tsx
@@ -0,0 +1 @@
+export * from './Header'
diff --git a/components/ResultRow/ResultRow.module.css b/components/ResultRow/ResultRow.module.css
index 9745b45..b13479e 100644
--- a/components/ResultRow/ResultRow.module.css
+++ b/components/ResultRow/ResultRow.module.css
@@ -1,20 +1,27 @@
 .result {
   margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(var(--foreground-rgb), 0.1);
 }
 
 .result:last-child {
   margin-bottom: 0;
+  border-bottom: none;
 }
 
 .resultLine {
   display: inline-grid;
-  grid-template-columns: 24px 1fr 2fr;
+  grid-template-columns: 24px 2fr 3fr;
   gap: 0.5rem;
   align-items: center;
   width: 100%;
   margin-bottom: 0.25rem;
 }
 
+.resultLine:last-child {
+  margin-bottom: 0;
+}
+
 .fiat {
   color: rgba(var(--foreground-rgb), 0.6);
 }