From 0bd13e7d9349af91109fa42f49799a7339219ee8 Mon Sep 17 00:00:00 2001 From: Braulio Rivas Abad <61257604+brauliorivas@users.noreply.github.com> Date: Sat, 21 Sep 2024 21:12:15 -0500 Subject: [PATCH] Show events on home and event route (#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 | 49 +++++++++++------------------ src/lib/components/HomeEvent.svelte | 45 ++++++++++++++++++++++++++ src/lib/components/Title.svelte | 11 +++++++ src/lib/data/events.json | 9 ++++-- src/routes/+page.svelte | 25 ++++++++++++++- src/routes/+page.ts | 2 ++ src/routes/events/+page.svelte | 4 +-- 7 files changed, 109 insertions(+), 36 deletions(-) create mode 100644 src/lib/components/HomeEvent.svelte create mode 100644 src/lib/components/Title.svelte diff --git a/src/lib/components/Event.svelte b/src/lib/components/Event.svelte index 4d5e6f8..2f08ea4 100644 --- a/src/lib/components/Event.svelte +++ b/src/lib/components/Event.svelte @@ -1,45 +1,34 @@ -
-
-
- rust -
-
-

- {name} -

-

- {description} -

-
-
-

- {date} -

-

{time}

-

{place}

-
+
+
+ {date.replaceAll("/", "-")} +

{name}

-
-
diff --git a/src/lib/components/HomeEvent.svelte b/src/lib/components/HomeEvent.svelte new file mode 100644 index 0000000..a2a0494 --- /dev/null +++ b/src/lib/components/HomeEvent.svelte @@ -0,0 +1,45 @@ + + +
+
+
+ rust +
+
+

+ {name} +

+

+ {description} +

+
+
+

+ {date} +

+

{time}

+

{place}

+
+
+
+ +
+
diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte new file mode 100644 index 0000000..58d4905 --- /dev/null +++ b/src/lib/components/Title.svelte @@ -0,0 +1,11 @@ + + +

+ >{title} +

diff --git a/src/lib/data/events.json b/src/lib/data/events.json index 2f06dee..1e13584 100644 --- a/src/lib/data/events.json +++ b/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" } ] } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 6d41b99..8eb8420 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,28 @@ - +
+ +
+ + <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> diff --git a/src/routes/+page.ts b/src/routes/+page.ts index 7a5d889..5c1184f 100644 --- a/src/routes/+page.ts +++ b/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; diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte index 8efd9c5..e51860d 100644 --- a/src/routes/events/+page.svelte +++ b/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>