format

kokoaespol · Aug 18, 2024 · 9042deb · 9042deb
1 parent 1a7ab2e
commit 9042deb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 43 deletions.
diff --git a/src/lib/components/Event.svelte b/src/lib/components/Event.svelte
@@ -6,36 +6,40 @@
 		name: string;
 		description: string;
 		date: string;
-        time: string;
-        place: string;
+		time: string;
+		place: string;
 	};
 
 	let { name, description, date, time, place }: Props = $props();
 </script>
 
-<div class="border border-lime-500 rounded-3xl my-4 overflow-hidden">
-	<div class="flex flex-col justify-center lg:grid lg:grid-cols-[1fr,2fr,1fr] lg:gap-x-4 p-8 bg-neutral-800">
-		<div class="h-fit ">
-			<img src={rust} alt="rust" class="rounded-3xl h-1/3 w-1/3 mx-auto my-auto">
+<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="text-2xl text-white font-fira font-semibold">
+			<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="text-lime-500 text-lg flex flex-row"><CalendarDays /><span class="ml-2">{date}</span></p>
-			<p class="flex flex-row my-2"><Clock3 /><span class="ml-2">{time}</span></p>
+			<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="bg-lime-500 text-black py-2 pr-6 font-fira font-semibold flex flex-row justify-end">
+	<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> 
+			<span class="mr-4">Registrarse</span>
 			<MoveRight />
 		</button>
 	</div>
-</div>
+</div>
diff --git a/src/lib/data/events.json b/src/lib/data/events.json
@@ -1,25 +1,25 @@
 {
-    "events": [
-        {
-            "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"
-        },
-        {
-            "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"
-        },
-        {
-            "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"
-        }
-    ]
-}
+	"events": [
+		{
+			"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"
+		},
+		{
+			"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"
+		},
+		{
+			"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"
+		}
+	]
+}
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-    import Event from "$lib/components/Event.svelte";
+	import Event from "$lib/components/Event.svelte";
 
 	let { data } = $props();
 </script>
 
-<div class="px-8 flex flex-col items-center">
+<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}
+			description={event.description}
+			date={event.date}
+			time={event.time}
+			place={event.place}
 		/>
 	{/each}
-</div>
+</div>