Mawoka
62 lines
1.7 KiB
Svelte
62 lines
1.7 KiB
Svelte
<!--
|
|
SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
|
|
|
|
SPDX-License-Identifier: MPL-2.0
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
import BrownButton from '$lib/components/buttons/brown.svelte';
|
|
|
|
interface Props {
|
|
data: PageData;
|
|
}
|
|
|
|
let { data }: Props = $props();
|
|
</script>
|
|
|
|
<div class="flex flex-col p-2">
|
|
{#each data.quizzes as quiz}
|
|
<div class="border-2 border-[#B07156] rounded-sm w-full h-[20vh] p-2 flex flex-col gap-2">
|
|
<div class="grid grid-cols-3 h-full">
|
|
<div class="hidden lg:flex w-auto h-full items-center relative">
|
|
{#if quiz.cover_image}
|
|
<img
|
|
src="/api/v1/storage/download/{quiz.cover_image}"
|
|
alt="user provided"
|
|
loading="lazy"
|
|
class="shrink-0 max-w-full max-h-full absolute rounded-sm"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
<div class="my-auto mx-auto max-h-full overflow-hidden">
|
|
<p class="text-xl text-center">{@html quiz.title}</p>
|
|
<p class="text-sm text-center text-clip overflow-hidden">
|
|
{@html quiz.description ?? ''}
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<p class="m-auto">Questions: {quiz.questions.length}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full">
|
|
<BrownButton href="/view/{quiz.id}?mod=true&autoExpand=true&autoReturn=true"
|
|
>View</BrownButton
|
|
>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="flex">
|
|
<div class="grid grid-cols-3 mx-auto">
|
|
<BrownButton disabled={data.page === '1'} href="/moderation?page={parseInt(data.page) + 1}"
|
|
>Previous Page</BrownButton
|
|
>
|
|
<p class="m-auto">Page {data.page}</p>
|
|
<BrownButton
|
|
disabled={data.quizzes.length !== 20}
|
|
href="/moderation?page={parseInt(data.page) - 1}">Next Page</BrownButton
|
|
>
|
|
</div>
|
|
</div>
|