Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show events on home and event route #54

Merged
merged 9 commits into from
Sep 22, 2024
Merged

Show events on home and event route #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a217a23
create title component
brauliorivas Sep 21, 2024
fbf7233
show events in home
brauliorivas Sep 21, 2024
aa781b4
add show more button
brauliorivas Sep 21, 2024
f90baa9
rename event comp for home
brauliorivas Sep 21, 2024
b6daffb
change a few things
brauliorivas Sep 21, 2024
de7e687
add category
brauliorivas Sep 21, 2024
0884977
pass category as prop
brauliorivas Sep 21, 2024
019b428
new event component
brauliorivas Sep 21, 2024
a7774d3
format
brauliorivas Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 19 additions & 30 deletions src/lib/components/Event.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
45 changes: 45 additions & 0 deletions src/lib/components/HomeEvent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions src/lib/components/Title.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 6 additions & 3 deletions src/lib/data/events.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]
}
25 changes: 24 additions & 1 deletion src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 2 additions & 0 deletions src/routes/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions src/routes/events/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading