refactor: move footer to React

src/components/footer.astro

@@ -1,38 +0,0 @@
----
-import { Container } from '@/components/container';
----
-
-<footer class="footer">
-  <Container>
-    <p>
-      Created by{' '}
-      <a href="https://twitter.com/remvze">
-        Maze <span>✦</span>
-      </a>
-    </p>
-  </Container>
-</footer>
-
-<style>
-  .footer {
-    display: flex;
-    align-items: center;
-    height: 100px;
-
-    & p {
-      font-size: var(--font-sm);
-      color: var(--color-foreground-subtle);
-      text-align: center;
-
-      & a {
-        font-weight: 500;
-        color: var(--color-foreground);
-        text-decoration: none;
-
-        & span {
-          color: #c0eb75;
-        }
-      }
-    }
-  }
-</style>

src/components/footer/footer.module.css

@@ -0,0 +1,17 @@
+.footer {
+  display: flex;
+  align-items: center;
+  height: 100px;
+
+  & p {
+    font-size: var(--font-sm);
+    color: var(--color-foreground-subtle);
+    text-align: center;
+
+    & a {
+      font-weight: 500;
+      color: var(--color-foreground);
+      text-decoration: none;
+    }
+  }
+}

src/components/footer/footer.tsx

@@ -0,0 +1,15 @@
+import { Container } from '@/components/container';
+
+import styles from './footer.module.css';
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <Container>
+        <p>
+          Created by <a href="https://twitter.com/remvze">Maze ✦</a>
+        </p>
+      </Container>
+    </footer>
+  );
+}

src/components/footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from './footer';

src/pages/index.astro

@@ -1,11 +1,11 @@
 ---
 import Layout from '@/layouts/layout.astro';
-import Footer from '@/components/footer.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
 import { Source } from '@/components/source';
 import { Donate } from '@/components/donate';
+import { Footer } from '@/components/footer';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">