47 lines
1.6 KiB
Svelte
47 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { cn } from '$lib/Utils';
|
|
import type { Puzzle } from '$lib/types';
|
|
|
|
export let puzzle: Puzzle;
|
|
|
|
$: tags = puzzle.tags?.filter((tag) => !['easy', 'medium', 'hard'].includes(tag.name));
|
|
</script>
|
|
|
|
<li
|
|
class={cn(
|
|
'group relative flex h-full w-full rounded-md border-2 bg-primary-700 font-code transition-colors duration-150 hover:bg-primary-600',
|
|
{
|
|
'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
|
|
'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
|
|
'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
|
|
'border-highlight-primary': !puzzle.tags?.length
|
|
// 'cursor-not-allowed': !isStarted(chapter)
|
|
}
|
|
)}
|
|
>
|
|
<a
|
|
class="flex h-full w-full items-center justify-between p-4"
|
|
href={`/dashboard/puzzles/${puzzle.id}`}
|
|
>
|
|
<div class="flex w-10/12 flex-col gap-2 lg:w-full lg:flex-row">
|
|
<span class="text-base font-semibold">
|
|
{puzzle.name}{' '}
|
|
<span class="text-sm text-highlight-secondary">
|
|
({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-x-6">
|
|
{#if puzzle.tags?.length}
|
|
<div class="flex gap-x-2 text-sm text-muted">
|
|
{#each puzzle.tags as tag}
|
|
<span class="inline-block rounded-md bg-primary-800 px-2 py-1">
|
|
{tag.name}
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
<!-- <ChevronRightIcon class="-translate-x-2 transform-gpu text-highlight-secondary duration-300 group-hover:translate-x-0 group-hover:text-brand" /> -->
|
|
</div>
|
|
</a>
|
|
</li>
|