44 lines
1.2 KiB
Svelte
44 lines
1.2 KiB
Svelte
<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>
|