support page

src/components/IconList.svelte

@@ -0,0 +1,42 @@
+<script>
+  import Icon from './Icon.svelte'
+
+  export let links = []
+</script>
+
+<ul>
+  {#each links as { href, name, icon }}
+    <li>
+      <a rel="noopener noreferrer" {href} target="_blank">
+        <Icon class="icon" {icon} />
+        {name}
+      </a>
+    </li>
+  {/each}
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    transition: transform 200ms ease;
+    padding: 0.75em 0.5em;
+    cursor: pointer;
+    border-radius: 0.5em;
+  }
+
+  li:hover {
+    box-shadow: 0px 6px 6px -3px #00000012;
+    transform: translateY(0.25em) translateX(0.15em) scale(1.05);
+  }
+
+  li :global(.icon) {
+    transform: translateY(0.3em);
+    font-size: 2em;
+    margin-right: 0.5rem;
+  }
+</style>

src/routes/contact.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Icon from '../components/Icon.svelte'
+  import IconList from '../components/IconList.svelte'
 
   import SimplePage from '../components/SimplePage.svelte'
 
@@ -23,40 +23,5 @@
 </svelte:head>
 
 <SimplePage title="Contact">
-  <ul>
-    {#each links as { href, name, icon }}
-      <li>
-        <a rel="noopener noreferrer" {href}>
-          <Icon class="icon" {icon} />
-          {name}
-        </a>
-      </li>
-    {/each}
-  </ul>
+  <IconList {links} />
 </SimplePage>
-
-<style>
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    transition: transform 200ms ease;
-    padding: 0.75em 0.5em;
-    cursor: pointer;
-    border-radius: 0.5em;
-  }
-
-  li:hover {
-    box-shadow: 0px 6px 6px -3px #00000012;
-    transform: translateY(0.25em) translateX(0.15em) scale(1.05);
-  }
-
-  li :global(.icon) {
-    transform: translateY(0.3em);
-    font-size: 2em;
-    margin-right: 0.5rem;
-  }
-</style>

src/routes/support.svelte

@@ -0,0 +1,26 @@
+<script>
+  import IconList from '../components/IconList.svelte'
+
+  import SimplePage from '../components/SimplePage.svelte'
+
+  const links = [
+    {
+      href: 'https://www.buymeacoffee.com/cupcakearmy',
+      name: 'Buy Me A Coffee',
+      icon: 'cafe-outline',
+    },
+    {
+      href: 'https://github.com/sponsors/cupcakearmy',
+      name: 'Github Sponsor',
+      icon: 'logo-github',
+    },
+  ]
+</script>
+
+<svelte:head>
+  <title>Support</title>
+</svelte:head>
+
+<SimplePage title="Support">
+  <IconList {links} />
+</SimplePage>