From 05796dad8d74b7b88299488874558d8efbf7289d Mon Sep 17 00:00:00 2001
From: Alexander Goussas <goussasalexander@gmail.com>
Date: Wed, 16 Oct 2024 06:33:17 -0500
Subject: [PATCH] feature: Add first speaker of CLI week

---
 src/lib/components/Speaker.svelte      | 19 +++++++++++++++++++
 src/routes/events/cliweek/+page.svelte | 15 +++++++++++----
 2 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/Speaker.svelte

diff --git a/src/lib/components/Speaker.svelte b/src/lib/components/Speaker.svelte
new file mode 100644
index 0000000..edadf1d
--- /dev/null
+++ b/src/lib/components/Speaker.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    const { name, image_url, date, time, title, topic } = $props();
+</script>
+
+<div class="my-4 rounded-2xl bg-neutral-800 px-6 py-4 w-4/5 flex gap-6">
+    <img src={image_url} alt={name} class="rounded-full w-[100px]"/>
+    <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-1 mb-2">
+            <span>{name}</span>
+            <small class="text-lime-600">{title}</small>
+        </div>
+        <span>📅 {date}</span>
+        <span>🕙 {time}</span>
+    </div>
+    <div class="h-100 bg-lime-600 w-[1px]"></div>
+    <div class="flex h-100 items-center text-center">
+        <span class="text-xl">{topic}</span>
+    </div>
+</div>
diff --git a/src/routes/events/cliweek/+page.svelte b/src/routes/events/cliweek/+page.svelte
index 2e03388..43edf4f 100644
--- a/src/routes/events/cliweek/+page.svelte
+++ b/src/routes/events/cliweek/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import Heading from "$lib/components/layout/Heading.svelte";
 	import Tag from "$lib/components/Tag.svelte";
+    import Speaker from "$lib/components/Speaker.svelte";
 </script>
 
 <svelte:head>
@@ -65,11 +66,17 @@
 		</p>
 	</div>
 
-	<div id="speakers">
+	<div id="speakers" class="w-full flex flex-col items-center">
 		<h4 class="text-xl text-lime-600">Speakers</h4>
-		<p>
-			There are no speakers yet! Why don't you become the first one?
-		</p>
+
+        <Speaker 
+            name="Miguel Sánchez"
+            title="Software Developer @ Devsu"
+            image_url="https://media.licdn.com/dms/image/v2/D4E03AQGnBb-gX-aI1w/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1694747246966?e=1734566400&v=beta&t=9i7iqBjwH3Qznc_XTUP93_uY8qJ808bqBPQ_mGLzfCE"
+            date="13-11-2024"
+            time="17H00"
+            topic="Del Backend a la Terminal: El Poder de los Django Commands"
+        />
 	</div>
 
 	<div>