finish brewery feature set

web/frontend/app/routes/brewery-detail.tsx

@@ -0,0 +1,57 @@
+import { Link, data } from 'react-router';
+import { getBreweryById } from '../lib/breweries.server';
+import type { Route } from './+types/brewery-detail';
+
+export function meta({ data }: Route.MetaArgs) {
+   return [{ title: `${data?.brewery.breweryName ?? 'Brewery'} | The Biergarten App` }];
+}
+
+export async function loader({ params }: Route.LoaderArgs) {
+   const brewery = await getBreweryById(params.id);
+   if (!brewery) {
+      throw data('Brewery not found.', { status: 404 });
+   }
+
+   return { brewery };
+}
+
+export default function BreweryDetail({ loaderData }: Route.ComponentProps) {
+   const { brewery } = loaderData;
+
+   return (
+      <div className="min-h-screen bg-base-200">
+         <div className="container mx-auto p-4 max-w-2xl">
+            <Link
+               to="/breweries"
+               className="link link-hover text-sm text-base-content/60 mb-4 inline-block"
+            >
+               &larr; Back to Breweries
+            </Link>
+
+            <div className="card bg-base-100 shadow">
+               <div className="card-body">
+                  <h1 className="card-title text-3xl">{brewery.breweryName}</h1>
+                  <p className="text-base-content/70 whitespace-pre-line">{brewery.description}</p>
+
+                  {brewery.location && (
+                     <div className="bg-base-200 rounded-box p-4 mt-4">
+                        <p className="text-xs font-semibold uppercase tracking-widest text-base-content/50 mb-2">
+                           Location
+                        </p>
+                        <p>{brewery.location.addressLine1}</p>
+                        {brewery.location.addressLine2 && <p>{brewery.location.addressLine2}</p>}
+                        <p>{brewery.location.postalCode}</p>
+                     </div>
+                  )}
+
+                  <p className="text-xs text-base-content/40 mt-4">
+                     Posted {new Date(brewery.createdAt).toLocaleDateString()}
+                     {brewery.updatedAt &&
+                        ` · Updated ${new Date(brewery.updatedAt).toLocaleDateString()}`}
+                  </p>
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+}