feat(group): group page from groups

1 files changed, 42 insertions, 40 deletions

diff --git a/src/routes/events/groups/+page.svelte b/src/routes/events/groups/+page.svelte
index b52407f0..44d69cb0 100644
--- a/src/routes/events/groups/+page.svelte
+++ b/src/routes/events/groups/+page.svelte
@@ -25,53 +25,55 @@
 				{#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}
+					<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}
+							<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>
-									{#if group && group.badge}
-										&#8204;
-										<button
-											class="unclickable-button button-badge badge-rainbow"
-											title={group.badge_description}
+								</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
-											data-tooltip-disable={group.badge_description}
 										>
-											{group.badge}
-										</button>
-									{/if}
-								</p>
+											@{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>
+									<p>
+										{group.description}
+									</p>
+								</div>
 							</div>
 						</div>
-					</div>
+					</a>
 				{/each}
 			</ul>
 		{:catch}