46 lines
1.3 KiB
Svelte
46 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import Swords from 'lucide-svelte/icons/swords';
|
|
import ChevronRight from 'lucide-svelte/icons/chevron-right';
|
|
|
|
import type { Chapter } from '$lib/types';
|
|
import { cn } from '$lib/utils';
|
|
|
|
export let chapter: Chapter;
|
|
</script>
|
|
|
|
<li
|
|
class={cn(
|
|
'group relative flex h-full w-full flex-col rounded border border-border bg-card transition-colors duration-150',
|
|
{
|
|
'hover:bg-card/80': chapter.show || (chapter.start && chapter.end),
|
|
'opacity-50': !chapter.show && !(chapter.start && chapter.end)
|
|
}
|
|
)}
|
|
>
|
|
{#if chapter.show || (chapter.start && chapter.end)}
|
|
<a
|
|
class="flex h-full w-full items-center justify-between gap-4 p-4"
|
|
href={chapter.show || (chapter.start && chapter.end) ? `/chapters/${chapter.id}` : null}
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-semibold">
|
|
{chapter.name}
|
|
</span>
|
|
{#if chapter.start && chapter.end}
|
|
<Swords class="stroke-muted-foreground" />
|
|
{/if}
|
|
</div>
|
|
<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
|
|
<ChevronRight />
|
|
</span>
|
|
</a>
|
|
{:else}
|
|
<span class="flex h-full w-full items-center gap-4 p-4">
|
|
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
|
|
<h2 class="font-semibold">
|
|
{chapter.name}
|
|
</h2>
|
|
</div>
|
|
</span>
|
|
{/if}
|
|
</li>
|