handle series

src/lib/components/SeriesCard.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Series } from '$lib/types';
+
+	let { series, loggedIn }: { series: Series; loggedIn: boolean } = $props();
+</script>
+
+<a href="/series/{series.slug}" class="group block">
+	<div
+		class="relative aspect-[2/3] rounded-lg overflow-hidden bg-gray-800 shadow-md transition-transform duration-200 group-hover:-translate-y-1 group-hover:shadow-2xl"
+	>
+		{#if series.has_cover}
+			<img
+				src="/api/cover/series/{series.slug}"
+				alt={series.title}
+				class="w-full h-full object-cover"
+				loading="lazy"
+			/>
+		{:else}
+			<div class="w-full h-full flex items-end p-3 bg-gradient-to-br from-indigo-900 to-gray-900">
+				<span class="text-sm font-medium text-gray-200 leading-tight line-clamp-3"
+					>{series.title}</span
+				>
+			</div>
+		{/if}
+
+		<div
+			class="absolute top-2 left-2 bg-indigo-600 text-white text-xs font-medium px-2 py-0.5 rounded-full"
+		>
+			Series
+		</div>
+
+		{#if series.library === 'private' && loggedIn}
+			<div
+				class="absolute top-2 right-2 bg-purple-600 text-white text-xs font-medium px-2 py-0.5 rounded-full"
+			>
+				Private
+			</div>
+		{/if}
+	</div>
+	<p class="mt-2 text-sm text-gray-300 truncate group-hover:text-white transition-colors">
+		{series.title}
+	</p>
+</a>