Update Heading component to use slot instead of prop (#61)

* ci: Configure for deployment on premise * feature: Add projects page * fix: Fix linter warnings * fix: Revert to using adapter-cloudflare for main integration * feature: Update Heading component to use a slot --------- Co-authored-by: Alexander Goussas <alexander.goussas@tia.com.ec>
kokoaespol · Sep 22, 2024 · b45fd12 · b45fd12
1 parent ddf7889
commit b45fd12
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git 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
@@ -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
@@ -1,15 +1,14 @@
 <script lang="ts">
 	import Heading from "$lib/components/layout/Heading.svelte";
 	import Project from "$lib/components/Project.svelte";
-  
 	let { data } = $props();
 </script>
 
 <svelte:head>
 	<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
@@ -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>