✨ New dashboard

frontend/src/routes/dashboard/+page.svelte

@@ -8,10 +8,12 @@
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
 	import { navbarVisible, signedIn } from '$lib/stores';
-	import Spinner from '$lib/Spinner.svelte';
+	// import Spinner from "$lib/Spinner.svelte";
 	import Fuse from 'fuse.js';
 	import BrownButton from '$lib/components/buttons/brown.svelte';
 
+	// import GrayButton from "$lib/components/buttons/gray.svelte";
+
 	interface QuizData {
 		id: string;
 		public: boolean;
@@ -24,6 +26,7 @@
 	}
 
 	let search_term = '';
+	let start_game = null;
 	signedIn.set(true);
 	navbarVisible.set(true);
 	const { t } = getLocalization();
@@ -40,7 +43,7 @@
 	let id_to_position_map = {};
 
 	const getData = async (): Promise<Array<QuizData>> => {
-		const res = await fetch('/api/v1/quiz/list');
+		const res = await fetch('/api/v1/quiz/list?page_size=100');
 		quizzes_to_show = await res.json();
 		fuse = new Fuse(quizzes_to_show, {
 			keys: ['title', 'description', 'questions.question'],
@@ -95,12 +98,12 @@
 			/>
 		</svg>
 	{:then quizzes}
-		<div class="flex flex-col w-fit mx-auto">
+		<div class="flex flex-col w-full mx-auto">
 			<!--		<button
                     class='px-4 py-2 font-medium tracking-wide text-gray-500 whitespace-nowrap dark:text-gray-400 capitalize transition-colors dark:bg-gray-700 duration-200 transform bg-[#B07156] rounded-md hover:bg-green-600 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80'>
                     Primary
                 </button>-->
-			<div class="w-full grid grid-cols-4 gap-2">
+			<div class="w-full grid lg:grid-cols-4 gap-2 grid-cols-2 px-4">
 				<BrownButton href="/create">{$t('words.create')}</BrownButton>
 				<BrownButton href="/import">{$t('words.import')}</BrownButton>
 				<BrownButton href="/results">{$t('words.results')}</BrownButton>
@@ -109,9 +112,6 @@
 				</BrownButton>
 			</div>
 			{#if quizzes.length !== 0}
-				{#await import('$lib/dashboard/main_slider.svelte')}
-					<Spinner />
-				{:then c}
 				<div class="flex justify-center pt-4 w-full">
 					<div>
 						<div>
@@ -145,8 +145,83 @@
 						</div>
 					</div>
 				</div>
-					<svelte:component this={c.default} bind:quizzes={quizzes_to_show} />
+				<div class="flex flex-col gap-4 mt-4 px-2">
-				{/await}
+					{#each quizzes_to_show as quiz}
+						<div
+							class="grid grid-cols-2 lg:grid-cols-3 w-full rounded border-[#B07156] border-2 p-2 h-[20vh] overflow-hidden max-h-[20vh]"
+						>
+							<div class="hidden lg:flex w-auto h-full items-center relative">
+								{#if quiz.cover_image}
+									<img
+										src={quiz.cover_image}
+										alt="user provided"
+										loading="lazy"
+										class="shrink-0 max-w-full max-h-full absolute"
+									/>
+								{/if}
+							</div>
+							<div class="my-auto mx-auto max-h-full">
+								<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="grid grid-cols-2 grid-rows-2 ml-auto gap-2 w-fit self-end my-auto"
+							>
+								<BrownButton href="/edit?quiz_id={quiz.id}"
+									>{$t('words.edit')}</BrownButton
+								>
+								<BrownButton
+									on:click={() => {
+										start_game = quiz.id;
+									}}
+								>
+									{$t('words.start')}
+								</BrownButton>
+								<BrownButton
+									on:click={() => {
+										// deleteQuiz(quiz.id);
+									}}
+									flex={true}
+								>
+									<!-- heroicons/trash -->
+									<svg
+										class="w-5 h-5"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										/>
+									</svg>
+								</BrownButton>
+								<BrownButton href="/api/v1/eximport/{quiz.id}" flex={true}
+									><!-- heroicons/download -->
+									<svg
+										class="w-5 h-5"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+										/>
+									</svg>
+								</BrownButton>
+							</div>
+						</div>
+					{/each}
+				</div>
 			{:else}
 				<p>
 					{$t('overview_page.no_quizzes')}