From d9ab0db31c063bee28f241296daddfdd5ef14da3 Mon Sep 17 00:00:00 2001
From: Xyphyn <james@xylight.dev>
Date: Sun, 17 Sep 2023 13:26:32 -0700
Subject: [PATCH] feat: add credits page

---
 src/routes/about/+page.svelte   | 39 +++++++++++++++++++++++++++++++++
 src/routes/about/Profile.svelte | 34 ++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/routes/about/Profile.svelte

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 4b6a1cc2..80482789 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import Link from '$lib/components/input/Link.svelte'
   import Logo from '$lib/components/ui/Logo.svelte'
+  import Profile from './Profile.svelte'
 </script>
 
 <div class="max-w-xl mx-auto">
@@ -39,4 +40,42 @@
       <Link href="https://buymeacoffee.com/xylight" highlight>Donate</Link>
     </li>
   </ul>
+  <h1 class="text-2xl font-bold leading-8">Credits</h1>
+  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+    <Profile
+      avatar="https://lemmy.xylight.dev/pictrs/image/3281f13c-68bb-47c9-8c98-b67f67714d5a.png?format=webp&thumbnail=128"
+      description="Main developer"
+      name="Xylight"
+      class="sm:col-span-3 place-self-center"
+      link="https://xylight.dev"
+    />
+    <hr class="border-slate-200 dark:border-zinc-800 w-full sm:col-span-3" />
+    <Profile
+      description="Early contributor"
+      name="pbui"
+      link="https://github.com/pbui"
+    />
+    <Profile
+      description="Early supporter"
+      name="iJeff"
+      link="https://lemdro.id/u/ijeff"
+    />
+    <Profile
+      description="Early contributor"
+      name="Cole"
+      link="https://lemdro.id/u/cole"
+    />
+    <Profile
+      description="Big supporter"
+      name="lemmy.world team"
+      link="https://lemmy.world"
+    />
+    <Profile description="Massive donator" name="rooki" />
+    <Profile description="Programming help" name="Sheodox" />
+    <Profile description="Design inspiration" name="ljdawson" />
+  </div>
+  <div class="mt-4">
+    If you've contributed in any way and aren't mentioned here, please let me
+    know and I'll add you here ASAP.
+  </div>
 </div>
diff --git a/src/routes/about/Profile.svelte b/src/routes/about/Profile.svelte
new file mode 100644
index 00000000..eb619ee0
--- /dev/null
+++ b/src/routes/about/Profile.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let avatar: string | undefined = undefined
+
+  export let name: string
+  export let description: string
+
+  export let link: string = '#'
+</script>
+
+<div class="flex flex-row items-center gap-2 {$$props.class}">
+  {#if $$slots.avatar || avatar}
+    {#if $$slots.avatar}
+      <slot name="avatar" />
+    {:else}
+      <img
+        src={avatar}
+        alt="{name}'s profile"
+        width={40}
+        height={40}
+        class="w-10 h-10 rounded-full"
+      />
+    {/if}
+  {/if}
+  <div class="flex flex-col">
+    <a
+      href={link}
+      class="font-semibold text-lg"
+      class:hover:underline={link != '#'}
+    >
+      {name}
+    </a>
+    <span class="text-slate-700 dark:text-zinc-300">{description}</span>
+  </div>
+</div>