laratheprotogen/meowsic
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

search page sillies

Browse source
This commit is contained in:
Lara 2024-11-06 00:06:30 +02:00
parent b7a15753d4
commit 441903800f
Signed by: laratheprotogen
GPG key ID: 5C0296EB3165F98B
11 changed files with 62 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
resources/js/Components/Layouts/AuthenticatedLayout.svelte
View file

@ -1,10 +1,23 @@
<script lang="ts">
import { inertia, page } from '@inertiajs/svelte';
import {inertia, page, router} from '@inertiajs/svelte';
import { globalState } from "@/Library/PassState.svelte";
import type {Snippet} from "svelte";
//eslint-disable-next-line
let { children }: { children: Snippet } = $props();
const searchChanged = () => {
if ($page.url !== '/search') {
router.visit('/search', {
preserveState: true,
})
}
if ($page.url === '/search' && globalState.searchQuery === '') {
router.visit('/', {
preserveState: true,
})
}
}
</script>
<div class="flex flex-col h-screen">
@ -14,14 +27,14 @@
<a href="/" use:inertia class="hover:underline">Home</a>
</nav>
<main class="w-10/12 px-10 py-8 overflow-y-auto">
<main class="w-10/12 px-10 py-8 overflow-y-auto main-content">
<div class="flex items-center justify-between mb-4">
<div class="mr-4">
{@render globalState.title?.()}
</div>
<div class="relative flex-grow">
<span class="material-icons text-gray-900 absolute left-3 top-1/2 transform -translate-y-1/2">search</span>
<input type="text" placeholder="Search..." class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
<input type="text" placeholder="Search..." bind:value={globalState.searchQuery} oninput={searchChanged} class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
</div>
</div>
{@render children()}