From e7f0c62076c159c1cd0c93a643d20858809bf57d Mon Sep 17 00:00:00 2001
From: Alexander Goussas <goussasalexander@gmail.com>
Date: Sun, 22 Sep 2024 14:45:17 -0500
Subject: [PATCH] feature: Update Heading component to use a slot

---
 src/lib/components/layout/Heading.svelte | 25 +++++-------------------
 src/routes/events/+page.svelte           |  5 +++--
 src/routes/projects/+page.svelte         |  2 +-
 src/routes/projects/[id]/+page.svelte    |  9 +++++++++
 4 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/layout/Heading.svelte b/src/lib/components/layout/Heading.svelte
index 4236784..341f213 100644
--- a/src/lib/components/layout/Heading.svelte
+++ b/src/lib/components/layout/Heading.svelte
@@ -1,29 +1,14 @@
-<script lang="ts">
-	export let title: string; // Recibirá el título que se mostrará
-</script>
-
-<section class="heading-section">
+<section class="heading-section my-8 flex h-[10rem] items-center">
 	<div class="heading-container">
-		<h1>{title}</h1>
+		<h1 class="ml-[5rem] flex items-center font-fira text-[2.5rem] font-bold text-black">
+			<slot />
+		</h1>
 	</div>
 </section>
 
 <style>
 	.heading-section {
-		background-image: url("$lib/assets/forms/frame.svg"); /* Asegúrate de colocar la ruta correcta a tu SVG */
+		background-image: url("$lib/assets/forms/frame.svg");
 		background-size: 100%;
-		align-items: center;
-		height: 25rem;
-		display: flex;
-	}
-
-	.heading-container {
-		color: black; /* Cambia a blanco si lo necesitas */
-		margin-left: 10%;
-	}
-
-	h1 {
-		font-size: 3rem;
-		font-weight: bold;
 	}
 </style>
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 5b82d06..296f13d 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -5,8 +5,9 @@
 	let { data } = $props();
 </script>
 
-<Heading title="EVENTOS" />
-<div class="flex flex-col items-center px-8">
+<Heading>EVENTOS</Heading>
+
+<div class="flex flex-col items-center px-8 md:flex-row md:items-start">
 	{#each data.events as event}
 		<Event
 			name={event.name}
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 70f102c..240a020 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -8,7 +8,7 @@
 	<title>Proyectos | KOKOA</title>
 </svelte:head>
 
-<Heading title="PROYECTOS" />
+<Heading>PROYECTOS</Heading>
 
 <div class="p-8">
 	<p class="font-fira font-medium">
diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index a4c2fa2..d72b9d8 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -2,10 +2,19 @@
 	import MemberAvatar from "$lib/components/MemberAvatar.svelte";
 	import Tag from "$lib/components/Tag.svelte";
 	import { Dot, Github, Smartphone, Globe } from "lucide-svelte";
+	import Heading from "$lib/components/layout/Heading.svelte";
 
 	export let data;
 </script>
 
+<Heading>
+	PROYECTOS
+	<span class="bg-gradient-to-r from-black to-gray-700 bg-clip-text text-[3rem] text-transparent">
+		{">"}
+	</span>
+	{data.project.name}
+</Heading>
+
 <div class="p-8">
 	<div class="mb-10">
 		<span class="font-fire mb-2 block text-xl text-lime-400">Autores</span>