Chocomiembros (#63)

* skeleton member component

* member component

* members route & membershome

* responsive layout & updated json members

---------

Co-authored-by: Alexander Goussas <[email protected]>

src/lib/components/Member.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import github_logo from "$lib/assets/icons/github.svg";
+    import linkedin_logo from "$lib/assets/icons/linkedin.svg";
+    import link_logo from "$lib/assets/icons/bx-link.svg";
+
+    type Props = { 
+        name: string;
+	    role: string;
+		photo: string;
+		socialMedia: {nombre: string, link: string}[];
+    }
+
+    let { name, role, photo, socialMedia}:Props = $props();
+</script>
+
+<div class="flex flex-col gap-2 justify-center items-center pb-14">
+    <img class="rounded-full size-20 md:size-24 inset-0" src={photo} alt="Foto" >
+
+    <div class="flex flex-col justify-center items-center">
+        <h2 class="text-lime-400 text-base" >{name}</h2>
+        <p class="text-sm">{role}</p>
+    </div>
+
+    <div class="flex flex-row gap-2 justify-items-center object-center	">
+
+        {#each socialMedia as media}
+
+            <a class="object-center" href={media.link}>
+
+                {#if media.nombre === "linkedin"}
+                    <img class="basis-1/3 object-center	" height="16" width="16" src={linkedin_logo} alt="LinkedIn">
+                {:else if media.nombre === "github"}
+                    <img class="basis-1/3 object-center	" height="16" width="16" src={github_logo} alt="Github">
+                {:else if media.nombre === "link"}
+                    <img class="basis-1/3 object-center	" height="16" width="16" src={link_logo} alt="Link">
+                {/if}
+
+            </a>
+
+        {/each}
+    </div>
+</div>

src/lib/components/Members_home.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Member from "$lib/components/Member.svelte"
+	import members from "$lib/data/members.json"
+</script>
+
+<div class="grid grid-cols-1 md:grid-cols-3 justify-center px-20 md:px-48 py-48 justify-items-center">
+	{#each members as member}
+		<Member 
+			name={member.name} 
+			role={member.role}
+			photo={member.photo}
+			socialMedia={member.socialMedia}
+		></Member>
+	{/each}
+</div>

src/lib/data/members.json

@@ -0,0 +1,84 @@
+[
+    {
+      "name": "Alina Carpio",
+      "role": "Presidente",
+      "photo": "https://avatars.githubusercontent.com/u/72272077?v=4",
+      "directiva": "si",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/alicarpio" }
+      ]
+    },
+    {
+      "name": "Melissa Ayllon",
+      "role": "Vicepresidente",
+      "photo": "https://avatars.githubusercontent.com/u/116417470?v=4",
+      "directiva": "si",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/MelissaAyllon" }
+      ]
+    },
+    {
+      "name": "Michael Estrada",
+      "role": "Secretario",
+      "photo": "https://avatars.githubusercontent.com/u/98861990?v=4",
+      "directiva": "si",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/BryanEstrada003" }
+      ]
+    },
+    {
+      "name": "Adrian Delgado",
+      "role": "Miembro",
+      "photo": "https://avatars.githubusercontent.com/u/11708972?v=4",
+      "directiva": "no",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/adriandelgado" }
+      ]
+    },
+    {
+      "name": "Braulio Rivas",
+      "role": "Miembro",
+      "photo": "https://avatars.githubusercontent.com/u/61257604?v=4",
+      "directiva": "no",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/brauliorivas" }
+      ]
+    },
+    {
+      "name": "Daniel Cortez",
+      "role": "Miembro",
+      "photo": "https://avatars.githubusercontent.com/u/112514991?v=4",
+      "directiva": "no",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/DanRCM" }
+      ]
+    },
+    {
+      "name": "Adair Abrigo",
+      "role": "Miembro",
+      "photo": "https://avatars.githubusercontent.com/u/93391519?v=4",
+      "directiva": "no",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/adairaxe" }
+      ]
+    },
+    {
+      "name": "Anthony Herrera",
+      "role": "Miembro",
+      "photo": "https://avatars.githubusercontent.com/u/137233273?v=4",
+      "directiva": "no",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/AnthonyyHL" }
+      ]
+    },
+    {
+      "name": "John Cañarte",
+      "role": "Miembro",
+      "photo": "https://avatars.githubusercontent.com/u/70679514?v=4",
+      "directiva": "no",
+      "socialMedia": [
+        { "nombre": "github", "link": "https://github.com/Jecanart" }
+      ]
+    }
+  ]
+

src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import Hero from "./Hero.svelte";
+	import Members_home from "$lib/components/Members_home.svelte";
 	import Chocoareas from "./Chocoareas.svelte";
 	import Chocomision from "./Chocomision.svelte";
-
 	import Title from "$lib/components/Title.svelte";
 	import Event from "$lib/components/HomeEvent.svelte";
 
@@ -30,4 +30,5 @@
 			</button>
 		</div>
 	</section>
-</main>
+  <Members_home />
+</main>

src/routes/members/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Member from "$lib/components/Member.svelte"
+	let { data } = $props();
+</script>
+
+<h1 class=" font-fira text-4xl text-slate-200 text-center pt-5 pb-8">Directiva</h1>
+<div class="grid grid-cols-1 md:grid-cols-3 justify-center px-20 md:px-48 py-3 justify-items-center">
+	{#each data.members as member}
+		{#if member.directiva === "si"}
+		<Member 
+			name={member.name} 
+			role={member.role}
+			photo={member.photo}
+			socialMedia={member.socialMedia}
+		></Member>
+		{/if}
+	{/each}
+</div>
+
+<h1 class=" font-fira text-4xl text-slate-200 text-center pt-5 pb-8">Miembros</h1>
+<div class="grid grid-cols-1 md:grid-cols-3 justify-center px-20 md:px-48 py-3 justify-items-center">
+	{#each data.members as member}
+		{#if member.directiva === "no"}
+		<Member 
+			name={member.name} 
+			role={member.role}
+			photo={member.photo}
+			socialMedia={member.socialMedia}
+		></Member>
+		{/if}
+	{/each}
+</div>

src/routes/members/+page.ts

@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+import members from "$lib/data/members.json"
+export const load = (async () => {
+	return {
+		title: "Chocomiembros",
+		// TODO: fetch from API
+		description: "Miembros del club Kokoa",
+		members,
+	};
+}) satisfies PageLoad;