feat(events): avatar for all events

2 files changed, 24 insertions, 2 deletions

diff --git a/src/lib/Database/events.ts b/src/lib/Database/events.ts
index c6153d26..8f507a83 100644
--- a/src/lib/Database/events.ts
+++ b/src/lib/Database/events.ts
@@ -1,3 +1,4 @@
+import type Group from '$lib/Events/Group.svelte';
 import supabase from './supabase';
 
 export interface Event {
@@ -6,7 +7,7 @@ export interface Event {
 	updated_at: string;
 	title: string;
 	description: string;
-	group: string;
+	group: Group;
 	banner: string;
 	anilist_url: string;
 }
@@ -18,7 +19,7 @@ interface NewEvent {
 }
 
 export const getEvents = async () => {
-	const { data, error } = await supabase.from('events').select('*');
+	const { data, error } = await supabase.from('events').select('*, group:groups(*)');
 
 	if (error) return [];
 
diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte
index 986db071..9905cd4b 100644
--- a/src/lib/Events/Event.svelte
+++ b/src/lib/Events/Event.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { Event } from '$lib/Database/events';
+	import root from '$lib/Utility/root';
 	import locale from '$stores/locale';
 
 	export let event: Event;
+	export let avatar = false;
 </script>
 
 <a href={event.anilist_url} target="_blank">
@@ -16,6 +18,14 @@
 		{/if}
 
 		<div class="card" id="user-grid-content">
+			{#if avatar}
+				<div id="user-grid-avatar">
+					<a href={root(`/events/group/${event.group.anilist_username}`)}>
+						<img src={event.group.avatar} alt="" width="100vw" id="avatar" />
+					</a>
+				</div>
+			{/if}
+
 			<div id="user-grid-content-text">
 				<p>
 					<a href={event.anilist_url} target="_blank" class="title-text">
@@ -46,6 +56,17 @@
 		margin: 0 0.625rem;
 	} */
 
+	#user-grid-avatar {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#avatar {
+		border-radius: 8px;
+	}
+
 	#user-grid {
 		background-size: cover;
 		background-position: center;