From e25d4c5d143939f4d2d62258bcf3e3a8c8a69f89 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Tue, 31 Dec 2024 09:23:48 +0100
Subject: [PATCH] feat: create and style components

---
 src/components/Footer.astro | 27 ++++++++++++++++++++++++---
 src/components/Social.astro | 14 ++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Social.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 294389d..84edce7 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,8 +1,29 @@
 ---
-const platform = "GitHub"
-const username = "rjNemo"
+import Social from "./Social.astro"
+
+const platforms = [
+{
+  platform: "GitHub",
+  username: "rjNemo",
+},{
+platform: "LinkedIn",
+username: "ruidy-nemausat",
+}
+]
 const url = `https://ruidy.nemausat.com`
 ---
 <footer>
-  <p>© 2023 Ruidy – Learn more about my projects on <a href={`https://github.com/${username}`}>{platform}</a> and my <a href={url}>website</a>.</p>
+  <p>© 2023 Ruidy</p> 
+  {platforms.map(platform => (
+    <Social platform={platform.platform} username={platform.username}/>
+  ))}
+ <a href={url}>website</a>
 </footer>
+
+<style>
+  footer {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+</style>
diff --git a/src/components/Social.astro b/src/components/Social.astro
new file mode 100644
index 0000000..bc0b705
--- /dev/null
+++ b/src/components/Social.astro
@@ -0,0 +1,14 @@
+---
+const { platform, username } = Astro.props
+---
+
+<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
+
+<style>
+  a {
+    padding: 0.5rem 1rem;
+    color: white;
+    background-color: #4c1d95;
+    text-decoration: none;
+  }
+</style>