taogaetz/chefbible
1
0
Fork 0
mirror of https://github.com/taogaetz/chefbible.git synced 2025-12-06 11:47:24 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

disable searchbar when user has no access

Browse Source
This commit is contained in:
taogaetz 2025-09-14 15:52:48 -04:00
parent 05850f3840
commit 7484646598
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/SearchBar.svelte
View File

@ -4,13 +4,14 @@
export let recipes: any[] = []; export let recipes: any[] = [];
export let placeholder: string = 'Search recipes...'; export let placeholder: string = 'Search recipes...';
export let disabled: boolean = false;
let searchTerm = ''; let searchTerm = '';
let filteredRecipes: any[] = []; let filteredRecipes: any[] = [];
let showResults = false; let showResults = false;
function handleSearch() { function handleSearch() {
if (!searchTerm.trim()) { if (disabled || !searchTerm.trim()) {
filteredRecipes = []; filteredRecipes = [];
showResults = false; showResults = false;
return; return;
@ -34,7 +35,7 @@
} }
function handleInputFocus() { function handleInputFocus() {
if (searchTerm.trim()) { if (!disabled && searchTerm.trim()) {
showResults = true; showResults = true;
} }
} }
@ -61,7 +62,9 @@
<div class="relative w-full max-w-lg" bind:this={searchContainer}> <div class="relative w-full max-w-lg" bind:this={searchContainer}>
<div <div
class="relative flex items-center rounded-xl border-2 border-transparent bg-white shadow-sm transition-all duration-200 focus-within:border-primary focus-within:shadow-lg" class="relative flex items-center rounded-xl border-2 border-transparent bg-white shadow-sm transition-all duration-200 {disabled
? 'cursor-not-allowed opacity-50'
: 'focus-within:border-primary focus-within:shadow-lg'}"
> >
<svg <svg
class="pointer-events-none absolute left-4 text-gray-400" class="pointer-events-none absolute left-4 text-gray-400"
@ -81,9 +84,12 @@
on:input={handleSearch} on:input={handleSearch}
on:focus={handleInputFocus} on:focus={handleInputFocus}
{placeholder} {placeholder}
class="w-full border-none bg-transparent px-4 py-3.5 pl-12 text-base text-gray-900 outline-none placeholder:text-gray-400" {disabled}
class="w-full border-none bg-transparent px-4 py-3.5 pl-12 text-base text-gray-900 outline-none placeholder:text-gray-400 {disabled
? 'cursor-not-allowed'
: ''}"
/> />
{#if searchTerm} {#if searchTerm && !disabled}
<button <button
class="absolute right-3 cursor-pointer rounded border-none bg-none p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600" class="absolute right-3 cursor-pointer rounded border-none bg-none p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
aria-label="Clear search" aria-label="Clear search"
@ -106,7 +112,7 @@
{/if} {/if}
</div> </div>
{#if showResults && filteredRecipes.length > 0} {#if showResults && filteredRecipes.length > 0 && !disabled}
<div class="absolute top-full left-1/2 z-50 mt-1 w-screen -translate-x-1/2"> <div class="absolute top-full left-1/2 z-50 mt-1 w-screen -translate-x-1/2">
<div class="mx-auto max-w-7xl px-5"> <div class="mx-auto max-w-7xl px-5">
<div class="rounded-xl border border-gray-200 bg-white shadow-2xl"> <div class="rounded-xl border border-gray-200 bg-white shadow-2xl">
@ -146,7 +152,7 @@
</div> </div>
</div> </div>
</div> </div>
{:else if showResults && searchTerm.trim()} {:else if showResults && searchTerm.trim() && !disabled}
<div class="absolute top-full left-1/2 z-50 mt-1 w-screen -translate-x-1/2"> <div class="absolute top-full left-1/2 z-50 mt-1 w-screen -translate-x-1/2">
<div class="mx-auto max-w-7xl px-5"> <div class="mx-auto max-w-7xl px-5">
<div class="rounded-xl border border-gray-200 bg-white shadow-2xl"> <div class="rounded-xl border border-gray-200 bg-white shadow-2xl">

2
src/routes/+layout.svelte
View File

@ -23,7 +23,7 @@
<img src={logo} alt="Chef Bible" class="w-20" /> <img src={logo} alt="Chef Bible" class="w-20" />
</a> </a>
</div> </div>
<SearchBar recipes={data.recipes} /> <SearchBar recipes={data.recipes} disabled={!data.hasAccess} />
<a <a
href={data.authenticated ? '/recipe/new' : '#'} href={data.authenticated ? '/recipe/new' : '#'}
class="btn font-extrabold btn-lg btn-primary {!data.authenticated class="btn font-extrabold btn-lg btn-primary {!data.authenticated