refactor(events): use group preview component

3 files changed, 102 insertions, 98 deletions

diff --git a/src/lib/Events/Group.svelte b/src/lib/Events/Group.svelte
new file mode 100644
index 00000000..5b581d6f
--- /dev/null
+++ b/src/lib/Events/Group.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Group } from '$lib/Database/groups';
+	import tooltip from '$lib/Tooltip/tooltip';
+
+	export let group: Group;
+</script>
+
+<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>
+
+<style>
+	#user-grid-content {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 1.5em;
+		background-color: rgba(0, 0, 0, 0.468);
+		color: #d8d8d8;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	#user-grid-avatar {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#avatar {
+		border-radius: 8px;
+	}
+
+	/* .click-item {
+		margin: 0 0.625rem;
+	} */
+
+	#user-grid {
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	#cover-image {
+		visibility: hidden;
+		height: 4.5em;
+	}
+
+	.title-text {
+		font-size: 1.1em;
+	}
+</style>
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>