feat(events): all events page

1 files changed, 63 insertions, 0 deletions

diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte
new file mode 100644
index 00000000..986db071
--- /dev/null
+++ b/src/lib/Events/Event.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Event } from '$lib/Database/events';
+	import locale from '$stores/locale';
+
+	export let event: Event;
+</script>
+
+<a href={event.anilist_url} target="_blank">
+	<div
+		class="card"
+		id="user-grid"
+		style={`background-image: ${event.banner ? `url(${event.banner})` : 'none'}; padding: 0;`}
+	>
+		{#if event}
+			<img src={event.banner} alt="" id="cover-image" />
+		{/if}
+
+		<div class="card" id="user-grid-content">
+			<div id="user-grid-content-text">
+				<p>
+					<a href={event.anilist_url} target="_blank" class="title-text">
+						{event.title}
+					</a>
+					<br />
+					{$locale().dateFormatter(new Date(event.created_at))}
+				</p>
+
+				<p>{event.description}</p>
+			</div>
+		</div>
+	</div>
+</a>
+
+<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;
+	}
+
+	/* .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>