From e269cf76b15991e92d24fc76be643ffe9627d5c0 Mon Sep 17 00:00:00 2001
From: Philippe Loctaux <p@philippeloctaux.com>
Date: Sun, 21 May 2023 21:48:45 +0200
Subject: [PATCH] added friends

---
 src/components/friend-card.astro | 38 ++++++++++++++++++++++++++++++++
 src/components/friends.astro     | 24 ++++++++++++++++++++
 src/pages/index.astro            |  2 ++
 3 files changed, 64 insertions(+)
 create mode 100644 src/components/friend-card.astro
 create mode 100644 src/components/friends.astro

diff --git a/src/components/friend-card.astro b/src/components/friend-card.astro
new file mode 100644
index 0000000..53df481
--- /dev/null
+++ b/src/components/friend-card.astro
@@ -0,0 +1,38 @@
+---
+interface Props {
+    name: string;
+    linkUri: string;
+}
+
+const { name, linkUri } = Astro.props;
+
+function extractInitials(name: string) {
+    // Split the name into words
+    const words = name.split(" ");
+
+    // Iterate over the words and extract the initials
+    const initials = words.map((word) => word.charAt(0).toUpperCase()).join("");
+
+    return initials;
+}
+
+const initials = extractInitials(name);
+const linkLabel = linkUri.replace(/^https?:\/\//, "");
+---
+
+<li class="py-2">
+    <a
+        href={linkUri}
+        target="_blank"
+        class="hover:bg-gray-500 transition-all duration-200 flex items-center rounded-lg p-2"
+    >
+        <span
+            class="rounded-full flex-shrink-0 mr-4 w-10 h-10 bg-sky-900 text-white flex items-center justify-center text-lg font-medium"
+            >{initials}</span
+        >
+        <div>
+            <p class="font-bold">{name}</p>
+            <p class="">{linkLabel}</p>
+        </div>
+    </a>
+</li>
diff --git a/src/components/friends.astro b/src/components/friends.astro
new file mode 100644
index 0000000..a49b4ab
--- /dev/null
+++ b/src/components/friends.astro
@@ -0,0 +1,24 @@
+---
+import FriendCard from "./friend-card.astro";
+---
+
+<div>
+    <h1 class="text-4xl font-bold mb-4">Friends</h1>
+    <p class="text-lg text-justify">
+        Folks I worked with, or I like what they do.
+    </p>
+
+    <ul
+        class="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+    >
+        <FriendCard name="Jamie Bishop" linkUri="https://jamiebi.shop" />
+        <FriendCard name="Ayden Panhuyzen" linkUri="https://ayden.dev" />
+        <FriendCard name="Corbin Crutchley" linkUri="https://crutchcorn.dev" />
+        <FriendCard name="James Fenn" linkUri="https://jfenn.me" />
+        <FriendCard name="Alex Dueppen" linkUri="https://ajd.sh" />
+        <FriendCard name="Peter Soboyejo" linkUri="https://petersoboyejo.com" />
+        <FriendCard name="Alexandre Wagner" linkUri="https://wagnerwave.com" />
+        <FriendCard name="Aidan Follestad" linkUri="https://af.codes" />
+        <FriendCard name="Victor Simon" linkUri="https://simonvictor.com" />
+    </ul>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 791f2ee..9628f1b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,7 @@ import Hero from "../components/hero.astro";
 import Whoami from "../components/whoami.astro";
 import Www from "../components/www.astro";
 import Talks from "../components/talks.astro";
+import Friends from "../components/friends.astro";
 ---
 
 <Page>
@@ -13,6 +14,7 @@ import Talks from "../components/talks.astro";
         <div class="my-16 space-y-32">
             <Www />
             <Talks />
+            <Friends />
         </div>
     </main>
 </Page>