refactor(events): use group preview component

1 files changed, 4 insertions, 48 deletions

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 />