From 788408b155c7b2228b34a966656c80a3afb4a60c Mon Sep 17 00:00:00 2001
From: Gabe Farrell <gabe@mnrva.dev>
Date: Sun, 10 Dec 2023 23:35:36 +0000
Subject: [PATCH] turn link arrow into component

---
 src/components/LinkArrow.astro   | 18 ++++++++++++++++++
 src/components/PostCard.astro    |  6 ++++--
 src/components/SocialLinks.astro |  5 +++--
 src/data/presentation.ts         |  2 +-
 4 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 src/components/LinkArrow.astro

diff --git a/src/components/LinkArrow.astro b/src/components/LinkArrow.astro
new file mode 100644
index 0000000..7e15ca8
--- /dev/null
+++ b/src/components/LinkArrow.astro
@@ -0,0 +1,18 @@
+<svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    class="transition-all duration-300 group-hover:translate-x-1"
+>
+    <path
+      d="M5.25 12.75L12.75 5.25"
+      stroke="#999999"
+      stroke-linecap="round"
+      stroke-linejoin="round"></path>
+    <path
+      d="M5.25 5.25H12.75V12.75"
+      stroke="#999999"
+      stroke-linecap="round"
+      stroke-linejoin="round"></path>
+</svg>
\ No newline at end of file
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 6917c88..6052899 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -1,5 +1,6 @@
 ---
 import formatDate from "@/utils/formatDate";
+import LinkArrow from "./LinkArrow.astro";
 
 type Props = {
   title: string;
@@ -22,7 +23,7 @@ const { title, publishedAt, description, slug } = Astro.props;
     <div class="flex flex-row items-center gap-4">
       <p>{formatDate(publishedAt)}</p>
 
-      <svg
+      <!-- <svg
         width="18"
         height="18"
         viewBox="0 0 18 18"
@@ -39,7 +40,8 @@ const { title, publishedAt, description, slug } = Astro.props;
           stroke="#999999"
           stroke-linecap="round"
           stroke-linejoin="round"></path>
-      </svg>
+      </svg> -->
+      <LinkArrow />
     </div>
   </div>
 
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
index 4c960bf..1b940d3 100644
--- a/src/components/SocialLinks.astro
+++ b/src/components/SocialLinks.astro
@@ -1,14 +1,15 @@
 ---
 import Link from "./shared/Link.astro";
 import presentation from "@/data/presentation";
+import LinkArrow from "@/components/LinkArrow.astro"
 ---
 
 <ul role="list" class="flex flex-row gap-2">
   {
     presentation.socials.map((social, index) => (
       <>
-        <li>
-          <Link href={social.link} label={social.label} />
+        <li class="flex">
+          <Link href={social.link} label={social.label} /><LinkArrow />
         </li>
 
         {presentation.socials.length - 1 !== index && <li>/</li>}
diff --git a/src/data/presentation.ts b/src/data/presentation.ts
index 6629fdb..0e7b995 100644
--- a/src/data/presentation.ts
+++ b/src/data/presentation.ts
@@ -22,7 +22,7 @@ const presentation: Presentation = {
      *API development*. When I'm not working, I play guitar and am an avid gamer.",
   socials: [
     {
-      label: "View my GitHub 🡕",
+      label: "View my GitHub",
       link: "https://github.com/gabehf",
     },
   ],