Show events on home and event route (kokoaespol#54)

* create title component

* show events in home

* add show more button

* rename event comp for home

* change a few things

* add category

* pass category as prop

* new event component

* format

src/lib/components/Event.svelte

@@ -1,45 +1,34 @@
 <script lang="ts">
-	import { CalendarDays, Clock3, MapPin, MoveRight } from "lucide-svelte";
-	import rust from "$lib/assets/rust.webp";
+	import { MapPin } from "lucide-svelte";
+	import Tag from "$lib/components/Tag.svelte";
 
 	type Props = {
 		name: string;
 		description: string;
 		date: string;
-		time: string;
 		place: string;
+		category: string;
 	};
 
-	let { name, description, date, time, place }: Props = $props();
+	let { name, description, date, place, category }: Props = $props();
 </script>
 
-<div class="my-4 overflow-hidden rounded-3xl border border-lime-500">
-	<div
-		class="flex flex-col justify-center bg-neutral-800 p-8 lg:grid lg:grid-cols-[1fr,2fr,1fr] lg:gap-x-4"
-	>
-		<div class="h-fit">
-			<img src={rust} alt="rust" class="mx-auto my-auto h-1/3 w-1/3 rounded-3xl" />
-		</div>
-		<div>
-			<h3 class="font-fira text-2xl font-semibold text-white">
-				{name}
-			</h3>
-			<p>
-				{description}
-			</p>
-		</div>
-		<div class="flex flex-col justify-center">
-			<p class="flex flex-row text-lg text-lime-500">
-				<CalendarDays /><span class="ml-2">{date}</span>
-			</p>
-			<p class="my-2 flex flex-row"><Clock3 /><span class="ml-2">{time}</span></p>
-			<p class="flex flex-row"><MapPin /><span class="ml-2">{place}</span></p>
-		</div>
+<div class="m-4 max-w-80 rounded-2xl bg-neutral-800 px-6 py-4">
+	<div class="mb-4">
+		<span class="font-fira font-medium text-lime-500">{date.replaceAll("/", "-")}</span>
+		<h2 class="font-fira text-xl font-medium text-white">{name}</h2>
 	</div>
-	<div class="flex flex-row justify-end bg-lime-500 py-2 pr-6 font-fira font-semibold text-black">
-		<button class="flex flex-row">
-			<span class="mr-4">Registrarse</span>
-			<MoveRight />
+	<Tag {category} />
+	<p class="my-4">{description}</p>
+	<div class="flex w-full flex-row justify-between">
+		<div class="flex flex-row items-center">
+			<MapPin />
+			<span class="ml-2">
+				{place}
+			</span>
+		</div>
+		<button class="rounded-full bg-lime-500 px-2 font-fira text-sm font-semibold text-black">
+			Ver más
 		</button>
 	</div>
 </div>

src/lib/components/HomeEvent.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { CalendarDays, Clock3, MapPin, MoveRight } from "lucide-svelte";
+	import rust from "$lib/assets/rust.webp";
+
+	type Props = {
+		name: string;
+		description: string;
+		date: string;
+		time: string;
+		place: string;
+	};
+
+	let { name, description, date, time, place }: Props = $props();
+</script>
+
+<div class="my-4 overflow-hidden rounded-3xl border border-lime-500">
+	<div
+		class="flex flex-col justify-center bg-neutral-800 p-8 sm:grid sm:grid-cols-[1fr,2fr,1fr] sm:gap-x-4"
+	>
+		<div class="h-fit">
+			<img src={rust} alt="rust" class="mx-auto my-auto h-1/3 w-1/3 rounded-3xl" />
+		</div>
+		<div>
+			<h3 class="font-fira text-2xl font-semibold text-white">
+				{name}
+			</h3>
+			<p>
+				{description}
+			</p>
+		</div>
+		<div class="flex flex-col justify-center">
+			<p class="flex flex-row text-lg text-lime-500">
+				<CalendarDays /><span class="ml-2">{date}</span>
+			</p>
+			<p class="my-2 flex flex-row"><Clock3 /><span class="ml-2">{time}</span></p>
+			<p class="flex flex-row"><MapPin /><span class="ml-2">{place}</span></p>
+		</div>
+	</div>
+	<div class="flex flex-row justify-end bg-lime-500 py-2 pr-6 font-fira font-semibold text-black">
+		<button class="flex flex-row">
+			<span class="mr-4">Registrarse</span>
+			<MoveRight />
+		</button>
+	</div>
+</div>

src/lib/components/Title.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	type Props = {
+		title: string;
+	};
+
+	let { title }: Props = $props();
+</script>
+
+<h2 class="font-fira text-xl font-semibold">
+	<span class="text-lime-500">></span>{title}
+</h2>

src/lib/data/events.json

@@ -5,21 +5,24 @@
 			"description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
 			"date": "15/08/2024",
 			"time": "11:00 - 12:00",
-			"place": "Lab Fiec 12A, ESPOL"
+			"place": "Lab Fiec 12A, ESPOL",
+			"category": "Taller"
 		},
 		{
 			"name": "Rust 101",
 			"description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
 			"date": "15/08/2024",
 			"time": "11:00 - 12:00",
-			"place": "Lab Fiec 12A, ESPOL"
+			"place": "Lab Fiec 12A, ESPOL",
+			"category": "Taller"
 		},
 		{
 			"name": "Rust 101",
 			"description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
 			"date": "15/08/2024",
 			"time": "11:00 - 12:00",
-			"place": "Lab Fiec 12A, ESPOL"
+			"place": "Lab Fiec 12A, ESPOL",
+			"category": "Taller"
 		}
 	]
 }

src/routes/+page.svelte

@@ -1,5 +1,28 @@
 <script lang="ts">
 	import Hero from "./Hero.svelte";
+	import Title from "$lib/components/Title.svelte";
+	import Event from "$lib/components/HomeEvent.svelte";
+
+	let { data } = $props();
 </script>
 
-<Hero />
+<main class="px-8">
+	<Hero />
+	<section class="my-8">
+		<Title title="Chocoeventos" />
+		<div class="flex flex-col items-center px-8">
+			{#each data.events as event}
+				<Event
+					name={event.name}
+					description={event.description}
+					date={event.date}
+					time={event.time}
+					place={event.place}
+				/>
+			{/each}
+			<button class="py mt-4 rounded-full bg-lime-500 px-8 font-fira font-semibold text-black">
+				<a href="/events"> Ver más </a>
+			</button>
+		</div>
+	</section>
+</main>

src/routes/+page.ts

@@ -1,9 +1,11 @@
 import type { PageLoad } from "./$types";
+import { events } from "$lib/data/events.json";
 
 export const load = (async () => {
 	return {
 		title: "Inicio",
 		description:
 			"Kokoa es un club estudiantil de ESPOL, en el que entusiastas del código libre se reunen a promover ideologías comunistas.",
+		events,
 	};
 }) satisfies PageLoad;

src/routes/events/+page.svelte

@@ -4,14 +4,14 @@
 	let { data } = $props();
 </script>
 
-<div class="flex flex-col items-center px-8">
+<div class="flex flex-wrap items-center px-8">
 	{#each data.events as event}
 		<Event
 			name={event.name}
 			description={event.description}
 			date={event.date}
-			time={event.time}
 			place={event.place}
+			category={event.category}
 		/>
 	{/each}
 </div>