42 lines
1.1 KiB
Svelte
42 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { cn } from '$lib/Utils';
|
|
import type { Chapter } from '$lib/types';
|
|
|
|
import ChevronRight from './Icons/ChevronRight.svelte';
|
|
|
|
export let chapter: Chapter;
|
|
</script>
|
|
|
|
<li
|
|
class={cn(
|
|
'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
|
|
{
|
|
'hover:bg-primary-600': chapter.show,
|
|
'opacity-50': !chapter.show
|
|
}
|
|
)}
|
|
>
|
|
{#if chapter.show}
|
|
<a
|
|
class="flex h-full w-full items-center gap-4 p-4"
|
|
href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
|
|
>
|
|
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
|
|
<h2 class="text-base font-semibold">
|
|
{chapter.name}
|
|
</h2>
|
|
</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="text-base font-semibold">
|
|
{chapter.name}
|
|
</h2>
|
|
</div>
|
|
</span>
|
|
{/if}
|
|
</li>
|