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 placeholder: string = 'Search recipes...';
export let disabled: boolean = false;
let searchTerm = '';
let filteredRecipes: any[] = [];
let showResults = false;
function handleSearch() {
if (!searchTerm.trim()) {
if (disabled || !searchTerm.trim()) {
filteredRecipes = [];
showResults = false;
return;
@ -34,7 +35,7 @@
}
function handleInputFocus() {
if (searchTerm.trim()) {
if (!disabled && searchTerm.trim()) {
showResults = true;
}
}
@ -61,7 +62,9 @@
<div class="relative w-full max-w-lg" bind:this={searchContainer}>
<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
class="pointer-events-none absolute left-4 text-gray-400"
@ -81,9 +84,12 @@
on:input={handleSearch}
on:focus={handleInputFocus}
{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
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"
@ -106,7 +112,7 @@
{/if}
</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="mx-auto max-w-7xl px-5">
<div class="rounded-xl border border-gray-200 bg-white shadow-2xl">
@ -146,7 +152,7 @@
</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="mx-auto max-w-7xl px-5">
<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" />
</a>
</div>
<SearchBar recipes={data.recipes} />
<SearchBar recipes={data.recipes} disabled={!data.hasAccess} />
<a
href={data.authenticated ? '/recipe/new' : '#'}
class="btn font-extrabold btn-lg btn-primary {!data.authenticated