council card base component

src/components/CouncilCardBase.svelte

@@ -0,0 +1,76 @@
+<script>
+  let { name, position, image } = $props();
+  import placeholder from 'assets/placeholderAvatar.png';
+  import { Avatar } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<style>
+  .card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background-color:transparent;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    color: white;
+    max-width: 400px;
+  }
+
+  .profile-img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .profile-img :global(img) {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .info {
+    flex: 1;
+  }
+
+  .name {
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+
+  .role {
+    color: #a0aec0;
+    margin-bottom: 0.5rem;
+  }
+
+  .button {
+    background-color: #2d3748;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  .button:hover {
+    background-color: #4a5568;
+  }
+</style>
+
+<div class="card">
+	<div class="profile-img">
+		{#if image}
+			<Avatar src={image} {name}/>
+		{:else}
+			<Avatar src={placeholder} {name} />
+		{/if}
+	</div>
+  <div class="info">
+    <div class="name">{name}</div>
+    <div class="role">{position}</div>
+    <a href="#" class="button">View Profile</a>
+  </div>
+</div>
+
+
+

src/routes/council/+page.svelte

@@ -1,26 +1,65 @@
-<script>
+<script lang="ts">
 	import CouncilCard from 'components/CouncilCard.svelte';
 	import Section from 'components/Section.svelte';
-	// import CouncilMember from 'utils/schemas.ts';
+	import CardCouncilBase from 'components/CouncilCardBase.svelte';
+	import CouncilCardBase from 'components/CouncilCardBase.svelte';
+	import type CouncilMember from 'utils/schemas'
+
 	let { data } = $props();
+	let years = ["U4", "U3", "U2", "U1", "U0"]
+	let vps : CouncilMember[] = []
+	let ureps : CouncilMember[] = []
+	// svelte-ignore non_reactive_update
+		let president: CouncilMember | null = null;
+	data.members.forEach((member: CouncilMember) => {
+		if (member.position.includes("VP") || member.position.includes("Equity and Mental Health Officer")){
+			vps.push(member); 
+		}
+		else if (member.position.includes("Representative")){
+			ureps.push(member)
+			ureps.sort((a, b) => {
+				const aYear = years.findIndex(y => a.position.includes(y))
+				const bYear = years.findIndex(y => b.position.includes(y))
+				return aYear - bYear
+			})
+		}
+		else if (member.position.includes("President")){
+			president = member
+		}
+	})
 </script>
 
 <title> ECSESS council </title>
 <Section>
 	<p class="page-title">Meet the council!</p>
-
 	<p>Group picture!</p>
-	
-	<div class="flex flex-row flex-wrap items-center align-middle gap-10 p-4">
-		{#each data.members as councilMember}
-			<CouncilCard
+</Section>
+<Section >
+	<div class="president">
+		{#if president}
+			<CouncilCardBase
+				name={president.name}
+				position={president.position}
+				image={president.image}
+			></CouncilCardBase>
+		{/if}
+	</div>
+	<div class="flex justify-center">
+		<div class="flex flex-row flex-wrap justify-center align-middle gap-10 p-4">
+		{#each vps as councilMember}
+			<CardCouncilBase
 				name={councilMember.name}
 				position={councilMember.position}
-				email={councilMember.email}
-				positionDescription={councilMember.positionDescription}
-				yearProgram={councilMember.yearProgram}
 				image={councilMember.image}
-			></CouncilCard>
+			></CardCouncilBase>
+		{/each}
+		{#each ureps as councilMember}
+		<CardCouncilBase
+			name={councilMember.name}
+			position={councilMember.position}
+			image={councilMember.image}
+		></CardCouncilBase>
 		{/each}
 		</div>
+	</div>
 </Section>

src/utils/schemas.ts

@@ -1,8 +1,8 @@
-type CouncilMember = {
-    name: string,
-    email: string,
-    position: string,
-    positionDescription: string,
-    image: string, // URL
-    yearProgram: string
+export default interface CouncilMember {
+	name: string;
+	email: string;
+	position: string;
+	positionDescription: string;
+	image: string; // URL
+	yearProgram: string;
 }