refactor(events): use group preview component

1 files changed, 94 insertions, 0 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>