Brewery Search

src/hooks.server.ts

@@ -1,17 +1,29 @@
 import { sequence } from '@sveltejs/kit/hooks';
+import { dev } from '$app/environment';
 import {
   handleErrorWithSentry,
   sentryHandle,
   initCloudflareSentryHandle,
 } from '@sentry/sveltekit';
 
-export const handle = sequence(
-  initCloudflareSentryHandle({
-    dsn: 'https://a5831fe9174e1bb01a828906b51574ba@o4509011200704512.ingest.us.sentry.io/4509183525322752',
-    tracesSampleRate: 1.0,
-  }),
-  sentryHandle()
-);
+export function handle({ event, resolve }) {
+  sequence(
+    initCloudflareSentryHandle({
+      dsn: 'https://a5831fe9174e1bb01a828906b51574ba@o4509011200704512.ingest.us.sentry.io/4509183525322752',
+      tracesSampleRate: 1.0,
+    }),
+    sentryHandle()
+  );
+
+  if (
+    dev &&
+    event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json'
+  ) {
+    return new Response(undefined, { status: 404 });
+  }
+
+  return resolve(event);
+}
 
 // If you have a custom error handler, pass it to `handleErrorWithSentry`
 export const handleError = handleErrorWithSentry();

src/lib/components/BreweriesTable.svelte

@@ -10,7 +10,7 @@
   } = $props();
 </script>
 
-<table class="min-w-full divide-y divide-gray-300">
+<table class="min-w-full divide-y divide-gray-300" data-testid="brewery-table">
   <thead class="bg-gray-100">
     <tr>
       <th
@@ -110,7 +110,6 @@
               }
             })()}
             class="text-amber-600 hover:text-amber-900 transition-colors duration-200 capitalize"
-            data-testid="brewery-type-link"
           >
             {brewery.brewery_type}
           </a></td

src/lib/components/BreweryCard.svelte

@@ -6,6 +6,7 @@
 
 <div
   class="bg-white shadow rounded-lg overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-200"
+  data-testid="brewery-card"
 >
   <div class="p-4">
     <div class="flex justify-between items-start">
@@ -71,7 +72,6 @@
         <a
           href={`/breweries/${brewery.country}?by_type=${brewery.brewery_type}`}
           class="text-amber-600 hover:text-amber-900 transition-colors duration-200 capitalize"
-          data-testid="brewery-type-link"
         >
           {brewery.brewery_type}
         </a>

src/lib/components/BrewerySearchForm.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Search } from 'lucide-svelte';
+
+  let { onSearch, initialQuery = '' } = $props<{
+    onSearch: (query: string) => Promise<void>;
+    initialQuery?: string;
+  }>();
+
+  let query = $state(initialQuery);
+
+  function handleSearch(event: SubmitEvent) {
+    event.preventDefault();
+    onSearch(query);
+  }
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    query = target.value;
+    if (query.length === 0) {
+        onSearch('');
+    }
+  }
+</script>
+
+<div class="shadow rounded-lg mb-6 border-transparent">
+  <form onsubmit={handleSearch} class="flex gap-0">
+    <input
+      type="search"
+      name="query"
+      class="w-full p-4 bg-white rounded-l-lg border-gray-300 shadow-sm focus:border-amber-500 focus:ring-amber-500"
+      placeholder="Search for a brewery..."
+      bind:value={query}
+      oninput={handleInput}
+    />
+    <button
+      type="submit"
+      class="inline-flex p-4 items-center border border-transparent text-sm font-medium rounded-r-lg text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 cursor-pointer"
+    >
+      <Search size={16} class="mr-2" />
+      Search
+    </button>
+  </form>
+</div>

src/lib/components/Pagination.svelte

@@ -6,11 +6,32 @@
     city = undefined,
     context = 'country',
     breweryType = undefined,
-  } = $props();
+    onPageChange = undefined,
+  } = $props<{
+    meta: { page: string; total: string; per_page: string };
+    country: string;
+    state?: string;
+    city?: string;
+    context?: 'country' | 'state' | 'city' | 'search';
+    breweryType?: string;
+    onPageChange?: (page: number) => void;
+  }>();
 
   let page = $derived(+meta.page);
+  let totalPages = $derived(Math.ceil(+meta.total / +meta.per_page));
+
+  function handlePageChange(targetPage: number) {
+    if (onPageChange) {
+      onPageChange(targetPage);
+    }
+  }
 
   const getPageUrl = (targetPage: number): string => {
+    // For search context, we don't generate URLs since we use the callback
+    if (context === 'search') {
+      return '#';
+    }
+
     let baseUrl = `/breweries/${country}`;
 
     if (context === 'state' || context === 'city') {
@@ -35,20 +56,42 @@
   class="mt-4 flex flex-wrap items-center justify-center sm:justify-end gap-3"
 >
   {#if page > 1}
-    <a
-      class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
-      href={getPageUrl(page - 1)}>Previous</a
-    >
+    {#if context === 'search' && onPageChange}
+      <button
+        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
+        onclick={() => handlePageChange(page - 1)}
+      >
+        Previous
+      </button>
+    {:else}
+      <a
+        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
+        href={getPageUrl(page - 1)}
+      >
+        Previous
+      </a>
+    {/if}
   {/if}
 
   <span class="text-sm text-gray-600 px-2">
-    Page {page} of {Math.ceil(+meta.total / +meta.per_page)}
+    Page {page} of {totalPages}
   </span>
 
-  {#if page < +meta.total / +meta.per_page}
-    <a
-      class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
-      href={getPageUrl(page + 1)}>Next</a
-    >
+  {#if page < totalPages}
+    {#if context === 'search' && onPageChange}
+      <button
+        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
+        onclick={() => handlePageChange(page + 1)}
+      >
+        Next
+      </button>
+    {:else}
+      <a
+        class="px-5 py-3 border border-amber-300 rounded-md text-amber-700 hover:bg-amber-50 hover:text-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors duration-200 shadow-sm hover:shadow transition-shadow duration-200 text-sm font-medium min-w-[100px] text-center"
+        href={getPageUrl(page + 1)}
+      >
+        Next
+      </a>
+    {/if}
   {/if}
 </div>

src/lib/components/SearchPagination.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  let {
+    currentPage,
+    totalPages,
+    hasPrevious,
+    hasNext,
+    onPageChange,
+    maxPagesToShow = 10,
+  } = $props<{
+    currentPage: number;
+    totalPages: number;
+    hasPrevious: boolean;
+    hasNext: boolean;
+    onPageChange: (page: number) => void;
+    maxPagesToShow?: number;
+  }>();
+
+  function handlePageChange(targetPage: number) {
+    if (
+      targetPage !== currentPage &&
+      targetPage >= 1 &&
+      targetPage <= totalPages
+    ) {
+      onPageChange?.(targetPage);
+    }
+  }
+</script>
+
+{#if totalPages > 1}
+  <div class="flex justify-center items-center space-x-2">
+    <button
+      class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+      disabled={!hasPrevious}
+      onclick={() => handlePageChange(currentPage - 1)}
+    >
+      Previous
+    </button>
+
+    <div class="flex space-x-1">
+      {#each Array(Math.min(totalPages, maxPagesToShow)) as _, i}
+        {@const pageNum = i + 1}
+        <button
+          class="px-4 py-2 border rounded-md shadow-sm text-sm font-medium {pageNum ===
+          currentPage
+            ? 'bg-amber-600 text-white border-amber-600'
+            : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50'}"
+          onclick={() => handlePageChange(pageNum)}
+        >
+          {pageNum}
+        </button>
+      {/each}
+    </div>
+
+    <button
+      class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+      disabled={!hasNext}
+      onclick={() => handlePageChange(currentPage + 1)}
+    >
+      Next
+    </button>
+  </div>
+{/if}