From 5bb57b1f8411346b61455d67b40e221b5716bcb3 Mon Sep 17 00:00:00 2001
From: Melissa Ayllon <116417470+MelissaAyllon@users.noreply.github.com>
Date: Sun, 22 Sep 2024 21:49:45 -0500
Subject: [PATCH] Chocomiembros (#63)

* skeleton member component

* member component

* members route & membershome

* responsive layout & updated json members

---------

Co-authored-by: Alexander Goussas <84427521+aloussase@users.noreply.github.com>
---
 src/lib/assets/icons/bx-link.svg       |  3 +
 src/lib/assets/icons/linkedin.svg      |  4 ++
 src/lib/components/Member.svelte       | 42 +++++++++++++
 src/lib/components/Members_home.svelte | 15 +++++
 src/lib/data/members.json              | 84 ++++++++++++++++++++++++++
 src/routes/+page.svelte                |  5 +-
 src/routes/members/+page.svelte        | 32 ++++++++++
 src/routes/members/+page.ts            | 10 +++
 8 files changed, 193 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/assets/icons/bx-link.svg
 create mode 100644 src/lib/assets/icons/linkedin.svg
 create mode 100644 src/lib/components/Member.svelte
 create mode 100644 src/lib/components/Members_home.svelte
 create mode 100644 src/lib/data/members.json
 create mode 100644 src/routes/members/+page.svelte
 create mode 100644 src/routes/members/+page.ts

diff --git a/src/lib/assets/icons/bx-link.svg b/src/lib/assets/icons/bx-link.svg
new file mode 100644
index 0000000..debd8db
--- /dev/null
+++ b/src/lib/assets/icons/bx-link.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" width="24" height="24" viewBox="0 0 24 24">
+<path d="M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z"/><path d="m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z"/>
+</svg>
\ No newline at end of file
diff --git a/src/lib/assets/icons/linkedin.svg b/src/lib/assets/icons/linkedin.svg
new file mode 100644
index 0000000..5a67441
--- /dev/null
+++ b/src/lib/assets/icons/linkedin.svg
@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">
+<title>LinkedIn</title>
+<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/Member.svelte b/src/lib/components/Member.svelte
new file mode 100644
index 0000000..4dea8dd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/Members_home.svelte b/src/lib/components/Members_home.svelte
new file mode 100644
index 0000000..81ccd00
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/data/members.json b/src/lib/data/members.json
new file mode 100644
index 0000000..d2f6835
--- /dev/null
+++ b/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" }
+      ]
+    }
+  ]
+  
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 607b780..8c03fae 100644
--- a/src/routes/+page.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/members/+page.svelte b/src/routes/members/+page.svelte
new file mode 100644
index 0000000..e226efe
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/members/+page.ts b/src/routes/members/+page.ts
new file mode 100644
index 0000000..2ff0abc
--- /dev/null
+++ b/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;
\ No newline at end of file