✨ Improved search-screen

frontend/src/lib/search-card.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
+	export let quiz;
+</script>
+
+<div class="flex justify-center">
+	<a href="/view/{quiz.id}" class="h-max w-fit">
+		<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20 dark:bg-slate-800">
+			<!--			<div class='flex justify-center md:justify-end -mt-16'>
+							<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
+								 src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
+						</div>-->
+			<div>
+				<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">
+					{quiz.title}
+				</h2>
+				<p class="mt-2 text-gray-600 dark:text-gray-300">{quiz.description}</p>
+			</div>
+			<div class="flex mt-4">
+				<span>{$t('explore_page.made_by')} {quiz.user}</span>
+			</div>
+		</div>
+	</a>
+</div>

frontend/src/lib/stores.ts

@@ -5,3 +5,38 @@ export const signedIn = writable(false);
 export const pathname = writable('/');
 
 export const alertModal = writable({ open: false, title: '', body: '' });
+
+import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+
+const URLSearchParamsToObject = (params: URLSearchParams) => {
+	let obj = {};
+	params.forEach((v: string, k: string) => {
+		obj[k] = v;
+	});
+	return obj;
+};
+
+export const createQueryParamsStore = (key: string) => {
+	let params;
+	page.subscribe((v) => {
+		params = URLSearchParamsToObject(v.url.searchParams);
+	});
+
+	return {
+		subscribe: (cb: Function) => {
+			return page.subscribe((p) => {
+				cb(p.url.searchParams.get(key));
+			});
+		},
+		set: (value: string) => {
+			params[key] = value;
+			const urlSearchParams = new URLSearchParams(params);
+			goto(`?${urlSearchParams.toString()}`, {
+				keepfocus: true,
+				replaceState: true,
+				noscroll: true
+			});
+		}
+	};
+};