Add sidebar cards and shared star-rating component for brewery detail page

web/frontend/app/features/breweries/components/BeerStyleBreakdownCard.tsx

@@ -0,0 +1,33 @@
+import SidebarCard from './SidebarCard';
+import type { FillerBeer } from '../utils/filler-brewery-detail';
+
+interface BeerStyleBreakdownCardProps {
+    beers: FillerBeer[];
+}
+
+const BeerStyleBreakdownCard = ({ beers }: BeerStyleBreakdownCardProps) => {
+    const counts = new Map<string, number>();
+    beers.forEach((beer) => counts.set(beer.style, (counts.get(beer.style) ?? 0) + 1));
+    const maxCount = Math.max(...counts.values());
+    const styles = [...counts.entries()].sort((a, b) => b[1] - a[1]);
+
+    return (
+        <SidebarCard title="Beer styles">
+            {styles.map(([style, count]) => (
+                <div key={style} className="flex flex-col gap-1">
+                    <div className="flex items-baseline justify-between gap-2">
+                        <span className="text-sm font-semibold">{style}</span>
+                        <span className="text-xs text-base-content/60 tabular-nums">{count}</span>
+                    </div>
+                    <progress
+                        className="progress progress-primary h-1.5"
+                        value={count}
+                        max={maxCount}
+                    />
+                </div>
+            ))}
+        </SidebarCard>
+    );
+};
+
+export default BeerStyleBreakdownCard;

web/frontend/app/features/breweries/components/BreweryDetailsCard.tsx

@@ -0,0 +1,24 @@
+import SidebarCard from './SidebarCard';
+
+interface BreweryDetailsCardProps {
+    foundedYear: number;
+    type: string;
+    beerCount: number;
+}
+
+const DetailRow = ({ label, value }: { label: string; value: string | number }) => (
+    <div className="flex items-center justify-between gap-2 text-sm">
+        <span className="text-base-content/60">{label}</span>
+        <span className="font-semibold">{value}</span>
+    </div>
+);
+
+const BreweryDetailsCard = ({ foundedYear, type, beerCount }: BreweryDetailsCardProps) => (
+    <SidebarCard title="Details">
+        <DetailRow label="Founded" value={foundedYear} />
+        <DetailRow label="Type" value={type} />
+        <DetailRow label="Beers listed" value={beerCount} />
+    </SidebarCard>
+);
+
+export default BreweryDetailsCard;

web/frontend/app/features/breweries/components/BreweryLocationMap.tsx

@@ -0,0 +1,41 @@
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L, { type LatLngTuple } from 'leaflet';
+import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
+import iconUrl from 'leaflet/dist/images/marker-icon.png';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+import 'leaflet/dist/leaflet.css';
+
+delete (L.Icon.Default.prototype as unknown as { _getIconUrl?: unknown })._getIconUrl;
+L.Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl });
+
+interface BreweryLocationMapProps {
+    latitude: number;
+    longitude: number;
+    label: string;
+}
+
+const ZOOM = 15;
+
+const BreweryLocationMap = ({ latitude, longitude, label }: BreweryLocationMapProps) => {
+    const position: LatLngTuple = [latitude, longitude];
+
+    return (
+        <MapContainer
+            center={position}
+            zoom={ZOOM}
+            scrollWheelZoom={false}
+            className="h-45 w-full rounded-field relative z-0"
+        >
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                noWrap
+            />
+            <Marker position={position}>
+                <Popup>{label}</Popup>
+            </Marker>
+        </MapContainer>
+    );
+};
+
+export default BreweryLocationMap;

web/frontend/app/features/breweries/components/CommunityStatsCard.tsx

@@ -0,0 +1,24 @@
+import SidebarCard from './SidebarCard';
+
+interface CommunityStatsCardProps {
+    likeCount: number;
+    ratingsCount: number;
+    commentCount: number;
+}
+
+const StatRow = ({ label, value }: { label: string; value: number }) => (
+    <div className="flex items-center justify-between gap-2 text-sm">
+        <span className="text-base-content/60">{label}</span>
+        <span className="font-semibold tabular-nums">{value}</span>
+    </div>
+);
+
+const CommunityStatsCard = ({ likeCount, ratingsCount, commentCount }: CommunityStatsCardProps) => (
+    <SidebarCard title="Community">
+        <StatRow label="Likes" value={likeCount} />
+        <StatRow label="Ratings" value={ratingsCount} />
+        <StatRow label="Comments" value={commentCount} />
+    </SidebarCard>
+);
+
+export default CommunityStatsCard;

web/frontend/app/features/breweries/components/LocationCard.tsx

@@ -0,0 +1,41 @@
+import { lazy, Suspense } from 'react';
+import ClientOnly from '../../../components/ClientOnly';
+import SidebarCard from './SidebarCard';
+import { formatBreweryAddress } from '../utils/format-address';
+import type { BreweryLocation } from '../breweries.server';
+
+const BreweryLocationMap = lazy(() => import('./BreweryLocationMap'));
+
+interface LocationCardProps {
+    breweryName: string;
+    location: BreweryLocation;
+    website: string;
+}
+
+const MAP_PLACEHOLDER_CLASS = 'skeleton h-45 w-full rounded-field';
+
+const LocationCard = ({ breweryName, location, website }: LocationCardProps) => (
+    <SidebarCard title="Location">
+        {location.coordinates && (
+            <ClientOnly fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
+                {() => (
+                    <Suspense fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
+                        <BreweryLocationMap
+                            latitude={location.coordinates!.latitude}
+                            longitude={location.coordinates!.longitude}
+                            label={`${breweryName} — ${location.addressLine1}`}
+                        />
+                    </Suspense>
+                )}
+            </ClientOnly>
+        )}
+        <p className="text-sm leading-relaxed m-0">{formatBreweryAddress(location)}</p>
+        <p className="text-sm m-0">
+            <a href={`https://${website}`} className="link link-primary" target="_blank" rel="noreferrer">
+                {website}
+            </a>
+        </p>
+    </SidebarCard>
+);
+
+export default LocationCard;

web/frontend/app/features/breweries/components/SidebarCard.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+interface SidebarCardProps {
+    title: string;
+    children: ReactNode;
+}
+
+const SidebarCard = ({ title, children }: SidebarCardProps) => (
+    <div className="card bg-base-100 shadow">
+        <div className="card-body gap-3 p-6">
+            <p className="text-xs font-bold uppercase tracking-widest text-base-content/50 m-0">
+                {title}
+            </p>
+            {children}
+        </div>
+    </div>
+);
+
+export default SidebarCard;

web/frontend/app/features/breweries/components/StarRating.tsx

@@ -0,0 +1,71 @@
+import { useId } from 'react';
+
+interface StarRatingProps {
+    value: number;
+    max?: number;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    onChange?: (value: number) => void;
+    label?: string;
+}
+
+const SIZE_CLASS: Record<NonNullable<StarRatingProps['size']>, string> = {
+    xs: 'rating-xs',
+    sm: 'rating-sm',
+    md: 'rating-md',
+    lg: 'rating-lg',
+    xl: 'rating-xl',
+};
+
+/** Read-only when `onChange` is omitted, interactive otherwise. Clicking the
+ * currently-selected star clears the rating (daisyUI radios can't do this natively). */
+const StarRating = ({ value, max = 5, size = 'sm', onChange, label }: StarRatingProps) => {
+    const name = useId();
+    const stars = Array.from({ length: max }, (_, i) => i + 1);
+
+    if (!onChange) {
+        return (
+            <div
+                className={`rating ${SIZE_CLASS[size]}`}
+                aria-label={label ?? `${value} out of ${max} stars`}
+            >
+                {stars.map((n) => (
+                    <div
+                        key={n}
+                        className="mask mask-star bg-warning"
+                        aria-label={`${n} star`}
+                        aria-current={n === value ? 'true' : undefined}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <div className={`rating ${SIZE_CLASS[size]}`}>
+            <input
+                type="radio"
+                name={name}
+                className="rating-hidden"
+                checked={value === 0}
+                onChange={() => onChange(0)}
+                aria-label="Clear rating"
+            />
+            {stars.map((n) => (
+                <input
+                    key={n}
+                    type="radio"
+                    name={name}
+                    className="mask mask-star bg-warning"
+                    checked={value === n}
+                    onChange={() => onChange(n)}
+                    onClick={() => {
+                        if (value === n) onChange(0);
+                    }}
+                    aria-label={`Rate ${n} of ${max}`}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default StarRating;