From 6257b7b8ad081e9be9c65f17f57ab845b60e720a Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 13 Feb 2024 10:03:52 -0800
Subject: refactor(events): use group preview component

---
 src/routes/events/group/[group]/+page.svelte | 52 +++------------------------
 src/routes/events/groups/+page.svelte        | 54 +++-------------------------
 2 files changed, 8 insertions(+), 98 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
index 7cd37100..02cf23cf 100644
--- a/src/routes/events/group/[group]/+page.svelte
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { Group } from '$lib/Database/groups';
+	import type { Group as GroupType } from '$lib/Database/groups';
 	import type { Event } from '$lib/Database/events';
 	import Message from '$lib/Loading/Message.svelte';
-	import tooltip from '$lib/Tooltip/tooltip';
 	import root from '$lib/Utility/root';
 	import { onMount } from 'svelte';
 	import locale from '$stores/locale.js';
+	import Group from '$lib/Events/Group.svelte';
 
 	export let data;
 
@@ -15,7 +15,7 @@
 		groupsResponse = fetch(root(`/api/events/group?slug=${data.group}`));
 	});
 
-	const asGroup = (group: any) => group as Group;
+	const asGroup = (group: any) => group as GroupType;
 
 	const asEvent = (event: any) => event as Event;
 </script>
@@ -35,51 +35,7 @@
 			{:else}
 				{@const group = asGroup(json)}
 
-				<div
-					class="card"
-					id="user-grid"
-					style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`}
-				>
-					{#if group}
-						<img src={group.banner} alt="" id="cover-image" />
-					{/if}
-
-					<div class="card" id="user-grid-content">
-						<div id="user-grid-avatar">
-							<a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
-								<img src={group.avatar} alt="" width="100vw" id="avatar" />
-							</a>
-						</div>
-
-						<div id="user-grid-content-text">
-							<p>
-								<a
-									href={`https://anilist.co/user/${group.anilist_username}`}
-									target="_blank"
-									title={String(group.anilist_id)}
-									use:tooltip
-								>
-									@{group.name}
-								</a>
-								{#if group && group.badge}
-									&#8204;
-									<button
-										class="unclickable-button button-badge badge-rainbow"
-										title={group.badge_description}
-										use:tooltip
-										data-tooltip-disable={group.badge_description}
-									>
-										{group.badge}
-									</button>
-								{/if}
-							</p>
-
-							<p>
-								{group.description}
-							</p>
-						</div>
-					</div>
-				</div>
+				<Group {group} />
 
 				<p />
 
diff --git a/src/routes/events/groups/+page.svelte b/src/routes/events/groups/+page.svelte
index 44d69cb0..bae12a3c 100644
--- a/src/routes/events/groups/+page.svelte
+++ b/src/routes/events/groups/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { Group } from '$lib/Database/groups';
+	import type { Group as GroupType } from '$lib/Database/groups';
 	import Message from '$lib/Loading/Message.svelte';
-	import tooltip from '$lib/Tooltip/tooltip';
 	import root from '$lib/Utility/root';
 	import { onMount } from 'svelte';
+	import Group from '$lib/Events/Group.svelte';
 
 	let groupsResponse: Promise<Response>;
 
@@ -11,7 +11,7 @@
 		groupsResponse = fetch(root('/api/events/groups'));
 	});
 
-	const asGroup = (group: any) => group as Group;
+	const asGroup = (group: any) => group as GroupType;
 </script>
 
 {#await groupsResponse}
@@ -26,53 +26,7 @@
 					{@const group = asGroup(rawGroup)}
 
 					<a href={root(`/events/group/${group.anilist_username}`)}>
-						<div
-							class="card"
-							id="user-grid"
-							style={`background-image: ${
-								group.banner ? `url(${group.banner})` : 'none'
-							}; padding: 0;`}
-						>
-							{#if group}
-								<img src={group.banner} alt="" id="cover-image" />
-							{/if}
-
-							<div class="card" id="user-grid-content">
-								<div id="user-grid-avatar">
-									<a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
-										<img src={group.avatar} alt="" width="100vw" id="avatar" />
-									</a>
-								</div>
-
-								<div id="user-grid-content-text">
-									<p>
-										<a
-											href={`https://anilist.co/user/${group.anilist_username}`}
-											target="_blank"
-											title={String(group.anilist_id)}
-											use:tooltip
-										>
-											@{group.name}
-										</a>
-										{#if group && group.badge}
-											&#8204;
-											<button
-												class="unclickable-button button-badge badge-rainbow"
-												title={group.badge_description}
-												use:tooltip
-												data-tooltip-disable={group.badge_description}
-											>
-												{group.badge}
-											</button>
-										{/if}
-									</p>
-
-									<p>
-										{group.description}
-									</p>
-								</div>
-							</div>
-						</div>
+						<Group {group} />
 					</a>
 				{/each}
 			</ul>
-- 
cgit v1.2.3