refactor(events): use group preview component

1 files changed, 4 insertions, 50 deletions

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>