1 files changed, 129 insertions, 0 deletions
diff --git a/src/routes/events/groups/+page.svelte b/src/routes/events/groups/+page.svelte
new file mode 100644
index 00000000..b52407f0
--- /dev/null
+++ b/src/routes/events/groups/+page.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import type { Group } 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';
+
+	let groupsResponse: Promise<Response>;
+
+	onMount(async () => {
+		groupsResponse = fetch(root('/api/events/groups'));
+	});
+
+	const asGroup = (group: any) => group as Group;
+</script>
+
+{#await groupsResponse}
+	<Message message="Loading groups ..." />
+{:then groups}
+	{#if groups}
+		{#await groups.json()}
+			<Message message="Parsing groups ..." />
+		{:then json}
+			<ul>
+				{#each json as rawGroup}
+					{@const group = asGroup(rawGroup)}
+
+					<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>
+				{/each}
+			</ul>
+		{:catch}
+			<Message message="" loader="ripple" slot>
+				Error parsing groups. Please
+				<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+			</Message>
+		{/await}
+	{:else}
+		<Message message="Parsing groups ..." />
+	{/if}
+{:catch}
+	<Message message="" loader="ripple" slot>
+		Error loading groups. Please
+		<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+	</Message>
+{/await}
+
+<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;
+	}
+</style>