@bearmenu/ui 0.6.0 → 0.7.0

package/src/components/place-about-tab.tsx

@@ -1,17 +1,7 @@
 "use client";
 
-import {
-  MapPin,
-  Phone,
-  Globe,
-  Clock,
-  UtensilsCrossed,
-  CreditCard,
-  Shield,
-  Car,
-  Building2,
-  Info,
-} from "lucide-react";
+import { Fragment } from "react";
+import { Phone, Globe, Check } from "lucide-react";
 import { cn } from "../lib/utils";
 
 // Lucide v1+ removed brand icons; inline SVGs preserve the original visual.
@@ -48,9 +38,11 @@ function Facebook(props: React.SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
-import { Card, CardContent, CardHeader, CardTitle } from "./card";
-import { Badge } from "./badge";
+
+import { Tag } from "./tag";
 import { Text } from "./text";
+import { Separator } from "./separator";
+import { PlaceScheduleWeek } from "./place-schedule-week";
 import type {
   PlaceAboutTabLabels,
   PlaceLinkKind,
@@ -60,23 +52,81 @@ import type {
 export interface PlaceAboutTabProps {
   place: PlacePreview;
   labels: PlaceAboutTabLabels;
-  /** Slot for an embedded map (FE only). Omit to skip the map row. */
+  /** Slot for an embedded map. Rendered first, full-bleed — the caller controls the breakout / gradient treatment. */
   mapSlot?: React.ReactNode;
   /** Slot for an embedded busyness chart. Rendered only when both this prop and `place.busyness` are present. */
   busynessSlot?: React.ReactNode;
-  /** Fires when the user clicks a contact link (phone/website/social). The URL is what the caller passed in. */
+  /** Fires when the user clicks a contact link (phone/website/social). */
   onLinkClick?: (kind: PlaceLinkKind, url: string) => void;
   className?: string;
 }
 
-function formatHour(h: number): string {
-  return `${h.toString().padStart(2, "0")}:00`;
-}
-
 function humanizeEnum(value: string): string {
   return value.replace(/_/g, " ");
 }
 
+function SectionHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <Text as="h3" variant="body-sm" weight="semibold" className="text-foreground">
+      {children}
+    </Text>
+  );
+}
+
+function Divider() {
+  return <Separator className="mx-4 w-auto" />;
+}
+
+function ChecklistGrid({ items }: { items: string[] }) {
+  return (
+    <div className="grid grid-cols-2 gap-x-3 gap-y-1.5">
+      {items.map((item, i) => (
+        <div key={i} className="flex items-start gap-2">
+          <Check
+            className="w-3.5 h-3.5 mt-0.5 shrink-0 text-muted-foreground"
+            aria-hidden
+          />
+          <Text as="span" variant="body-sm" color="muted">
+            {item}
+          </Text>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ChipRow({ items }: { items: string[] }) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {items.map((item, i) => (
+        <Tag key={i} variant="default">
+          {item}
+        </Tag>
+      ))}
+    </div>
+  );
+}
+
+function StatusTag({
+  status,
+  label,
+}: {
+  status: "operational" | "closed_temporarily" | "closed_permanently";
+  label: string;
+}) {
+  const variant: "success" | "warning" | "destructive" =
+    status === "operational"
+      ? "success"
+      : status === "closed_temporarily"
+        ? "warning"
+        : "destructive";
+  return (
+    <Tag variant={variant} className="capitalize">
+      {label}
+    </Tag>
+  );
+}
+
 export function PlaceAboutTab({
   place,
   labels,
@@ -85,12 +135,6 @@ export function PlaceAboutTab({
   onLinkClick,
   className,
 }: PlaceAboutTabProps) {
-  const todayHours =
-    place.hours && place.hours.length > 0
-      ? place.hours.map((slot) => `${formatHour(slot.opens_at)} - ${formatHour(slot.closes_at)}`)
-      : null;
-
-  const formattedAddress = place.location?.address;
   const handleLinkClick = (kind: PlaceLinkKind, url?: string) => {
     if (onLinkClick && url) onLinkClick(kind, url);
   };
@@ -104,371 +148,293 @@ export function PlaceAboutTab({
   const getParkingLabel = (key: string): string =>
     labels.parkingLabels[key] || humanizeEnum(key);
   const getTypeLabel = (key: string): string => labels.typeLabels[key] || humanizeEnum(key);
-  const getStatusLabel = (key: string): string => labels.statusLabels[key] || humanizeEnum(key);
+  const getStatusLabel = (key: string): string =>
+    labels.statusLabels[key] || humanizeEnum(key);
 
-  return (
-    <div className={cn("space-y-4 pt-4 px-4", className)}>
-      {mapSlot}
+  const hasDescription = Boolean(
+    place.generative_summary || place.review_summary || place.description
+  );
+  const hasDescriptionChips = Boolean(place.type || place.business_status);
+  const hasContact = Boolean(
+    place.location?.address ||
+      place.phone ||
+      place.website_url ||
+      place.socials?.instagram_url ||
+      place.socials?.facebook_url
+  );
+  const hasSchedule = Boolean(place.schedule);
+  const hasBusyness = Boolean(busynessSlot && place.busyness && place.busyness.length > 0);
+  const hasCuisines = (place.cuisines?.length ?? 0) > 0;
+  const hasAmenities = (place.amenities?.length ?? 0) > 0;
+  const hasPayment = (place.payment_options?.length ?? 0) > 0;
+  const hasAccessibility = (place.accessibility_features?.length ?? 0) > 0;
+  const hasParking = (place.parking_options?.length ?? 0) > 0;
+  const hasLandmarks = (place.landmarks?.length ?? 0) > 0;
 
-      {(place.description || place.generative_summary || place.review_summary) && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Info className="w-5 h-5" aria-hidden="true" />
-              {labels.description}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {place.generative_summary && (
-              <div>
-                <Text as="p" variant="body-sm" color="muted" className="mb-2">
-                  {labels.overview}
-                </Text>
-                <Text as="p" color="default">
+  const neighborhood =
+    place.areas && place.areas.length > 0
+      ? place.areas.map((a) => a.name).join(" · ")
+      : null;
+
+  const sections: Array<{ key: string; node: React.ReactNode }> = [];
+
+  if (hasDescription || hasDescriptionChips) {
+    sections.push({
+      key: "description",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.description}</SectionHeading>
+          {hasDescription && (
+            <div className="space-y-2">
+              {place.generative_summary && (
+                <Text as="p" variant="body-sm" leading="snug" color="muted">
                   {place.generative_summary}
                 </Text>
-              </div>
-            )}
-            {place.description && (
-              <div>
-                <Text as="p" variant="body-sm" color="muted" className="mb-2">
-                  {labels.description}
+              )}
+              {place.review_summary && (
+                <Text as="p" variant="body-sm" leading="snug" color="muted">
+                  {place.review_summary}
                 </Text>
-                <Text as="p" color="default">
+              )}
+              {place.description && (
+                <Text as="p" variant="body-sm" leading="snug" color="muted">
                   {place.description}
                 </Text>
-              </div>
-            )}
-            {place.review_summary && (
+              )}
+            </div>
+          )}
+          {hasDescriptionChips && (
+            <div className="flex flex-wrap gap-2">
+              {place.type && (
+                <Tag variant="default" className="capitalize">
+                  {getTypeLabel(place.type)}
+                </Tag>
+              )}
+              {place.business_status && (
+                <StatusTag
+                  status={place.business_status}
+                  label={getStatusLabel(place.business_status)}
+                />
+              )}
+            </div>
+          )}
+        </section>
+      ),
+    });
+  }
+
+  if (hasContact) {
+    sections.push({
+      key: "contact",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.contactAndLocation}</SectionHeading>
+          <div className="space-y-2.5">
+            {place.location?.address && (
               <div>
-                <Text as="p" variant="body-sm" color="muted" className="mb-2">
-                  {labels.whatPeopleSay}
-                </Text>
-                <Text as="p" color="default">
-                  {place.review_summary}
+                <Text as="p" variant="body-sm" color="muted">
+                  {place.location.address}
                 </Text>
+                {neighborhood && (
+                  <Text as="p" variant="body-sm" color="muted" className="mt-0.5">
+                    {neighborhood}
+                  </Text>
+                )}
               </div>
             )}
-          </CardContent>
-        </Card>
-      )}
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <MapPin className="w-5 h-5" aria-hidden="true" />
-            {labels.contactAndLocation}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {formattedAddress && (
-            <div>
-              <Text as="p" variant="body-sm" color="muted" className="mb-1">
-                {labels.address}
-              </Text>
-              <Text as="p" color="default">
-                {formattedAddress}
-              </Text>
-            </div>
-          )}
-          {place.phone && (
-            <div className="flex items-center gap-2">
-              <Phone className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+            {place.phone && (
               <a
                 href={`tel:${place.phone}`}
                 onClick={() => handleLinkClick("phone", place.phone)}
-                className="text-foreground hover:text-primary transition-colors"
+                className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                {place.phone}
+                <Phone className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Text as="span" variant="body-sm">
+                  {place.phone}
+                </Text>
               </a>
-            </div>
-          )}
-          {place.website_url && (
-            <div className="flex items-center gap-2">
-              <Globe className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+            )}
+            {place.website_url && (
               <a
                 href={place.website_url}
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => handleLinkClick("website", place.website_url)}
-                className="text-foreground hover:text-primary transition-colors break-all"
+                className="flex items-center gap-2 text-foreground hover:text-primary transition-colors break-all"
               >
-                {place.website_url}
+                <Globe className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Text as="span" variant="body-sm" className="break-all">
+                  {place.website_url}
+                </Text>
               </a>
-            </div>
-          )}
-          {place.socials?.instagram_url && (
-            <div className="flex items-center gap-2">
-              <Instagram className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+            )}
+            {place.socials?.instagram_url && (
               <a
                 href={place.socials.instagram_url}
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => handleLinkClick("instagram", place.socials?.instagram_url)}
-                className="text-foreground hover:text-primary transition-colors"
+                className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                {labels.instagram}
+                <Instagram className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Text as="span" variant="body-sm">
+                  {labels.instagram}
+                </Text>
               </a>
-            </div>
-          )}
-          {place.socials?.facebook_url && (
-            <div className="flex items-center gap-2">
-              <Facebook className="w-4 h-4 text-muted-foreground" aria-hidden="true" />
+            )}
+            {place.socials?.facebook_url && (
               <a
                 href={place.socials.facebook_url}
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => handleLinkClick("facebook", place.socials?.facebook_url)}
-                className="text-foreground hover:text-primary transition-colors"
+                className="flex items-center gap-2 text-foreground hover:text-primary transition-colors"
               >
-                {labels.facebook}
-              </a>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {todayHours && todayHours.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Clock className="w-5 h-5" aria-hidden="true" />
-              {labels.todayHours}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center gap-2">
-                <span
-                  className={cn(
-                    "w-2 h-2 rounded-full",
-                    place.open_now ? "bg-green-500" : "bg-muted-foreground"
-                  )}
-                />
-                <Text
-                  as="span"
-                  weight="medium"
-                  className={place.open_now ? "text-green-600 dark:text-green-400" : ""}
-                >
-                  {place.open_now ? labels.statusOpen : labels.statusClosed}
+                <Facebook className="w-4 h-4 text-muted-foreground shrink-0" aria-hidden />
+                <Text as="span" variant="body-sm">
+                  {labels.facebook}
                 </Text>
-              </div>
-              {todayHours.map((range, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  <Text as="span" color="muted">
-                    {range}
-                  </Text>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {busynessSlot && place.busyness && place.busyness.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Clock className="w-5 h-5" aria-hidden="true" />
-              {labels.typicalBusyness}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>{busynessSlot}</CardContent>
-        </Card>
-      )}
+              </a>
+            )}
+          </div>
+        </section>
+      ),
+    });
+  }
 
-      {place.cuisines && place.cuisines.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <UtensilsCrossed className="w-5 h-5" aria-hidden="true" />
-              {labels.cuisines}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-2">
-              {place.cuisines.map((cuisine, index) => (
-                <Badge key={index} variant="secondary">
-                  {cuisine.charAt(0).toUpperCase() + cuisine.slice(1)}
-                </Badge>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+  if (hasSchedule) {
+    sections.push({
+      key: "hours",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.todayHours}</SectionHeading>
+          <PlaceScheduleWeek
+            schedule={place.schedule}
+            labels={{
+              days: labels.scheduleDays,
+              closed: labels.statusClosed,
+              noHoursAvailable: labels.noHoursAvailable,
+            }}
+            autoScrollToToday={false}
+          />
+        </section>
+      ),
+    });
+  }
 
-      {place.amenities && place.amenities.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle>{labels.amenities}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
-              {place.amenities.map((amenity, index) => (
-                <div key={index} className="flex items-center gap-2 text-sm">
-                  <Text as="span" color="muted">
-                    •
-                  </Text>
-                  <Text as="span" color="default">
-                    {getAmenityLabel(amenity)}
-                  </Text>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+  if (hasBusyness) {
+    sections.push({
+      key: "busyness",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.typicalBusyness}</SectionHeading>
+          {busynessSlot}
+        </section>
+      ),
+    });
+  }
 
-      {place.payment_options && place.payment_options.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <CreditCard className="w-5 h-5" aria-hidden="true" />
-              {labels.paymentOptions}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-2">
-              {place.payment_options.map((payment, index) => (
-                <Badge key={index} variant="outline">
-                  {getPaymentLabel(payment)}
-                </Badge>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+  if (hasCuisines) {
+    sections.push({
+      key: "cuisines",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.cuisines}</SectionHeading>
+          <ChipRow
+            items={place.cuisines!.map((c) => c.charAt(0).toUpperCase() + c.slice(1))}
+          />
+        </section>
+      ),
+    });
+  }
 
-      {place.accessibility_features && place.accessibility_features.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Shield className="w-5 h-5" aria-hidden="true" />
-              {labels.accessibility}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-              {place.accessibility_features.map((feature, index) => (
-                <div key={index} className="flex items-center gap-2 text-sm">
-                  <Text as="span" color="muted">
-                    •
-                  </Text>
-                  <Text as="span" color="default">
-                    {getAccessibilityLabel(feature)}
-                  </Text>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+  if (hasAmenities) {
+    sections.push({
+      key: "amenities",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.amenities}</SectionHeading>
+          <ChecklistGrid items={place.amenities!.map(getAmenityLabel)} />
+        </section>
+      ),
+    });
+  }
 
-      {place.parking_options && place.parking_options.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Car className="w-5 h-5" aria-hidden="true" />
-              {labels.parking}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-2">
-              {place.parking_options.map((parking, index) => (
-                <Badge key={index} variant="outline">
-                  {getParkingLabel(parking)}
-                </Badge>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+  if (hasPayment) {
+    sections.push({
+      key: "payment",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.paymentOptions}</SectionHeading>
+          <ChipRow items={place.payment_options!.map(getPaymentLabel)} />
+        </section>
+      ),
+    });
+  }
 
-      {place.landmarks && place.landmarks.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <MapPin className="w-5 h-5" aria-hidden="true" />
-              {labels.nearbyLandmarks}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              {place.landmarks.map((landmark, index) => (
-                <div key={index} className="flex justify-between items-center">
-                  <Text as="span" color="default">
-                    {landmark.name}
-                  </Text>
-                  {landmark.distance_meters !== undefined &&
-                    landmark.distance_meters !== null && (
-                      <Text as="span" variant="body-sm" color="muted">
-                        {(landmark.distance_meters / 1000).toFixed(1)} km
-                      </Text>
-                    )}
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+  if (hasAccessibility) {
+    sections.push({
+      key: "accessibility",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.accessibility}</SectionHeading>
+          <ChecklistGrid items={place.accessibility_features!.map(getAccessibilityLabel)} />
+        </section>
+      ),
+    });
+  }
 
-      {place.areas && place.areas.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Building2 className="w-5 h-5" aria-hidden="true" />
-              {labels.neighborhood}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-2">
-              {place.areas.map((area, index) => (
-                <Badge key={index} variant="secondary">
-                  {area.name}
-                </Badge>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
+  if (hasParking) {
+    sections.push({
+      key: "parking",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.parking}</SectionHeading>
+          <ChipRow items={place.parking_options!.map(getParkingLabel)} />
+        </section>
+      ),
+    });
+  }
 
-      {(place.type || place.business_status) && (
-        <Card>
-          <CardHeader>
-            <CardTitle>{labels.businessInformation}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            {place.type && (
-              <div className="flex justify-between items-center">
-                <Text as="span" variant="body-sm" color="muted">
-                  {labels.type}
+  if (hasLandmarks) {
+    sections.push({
+      key: "landmarks",
+      node: (
+        <section className="px-4 space-y-2">
+          <SectionHeading>{labels.nearbyLandmarks}</SectionHeading>
+          <div className="space-y-2">
+            {place.landmarks!.map((landmark, i) => (
+              <div key={i} className="flex justify-between items-baseline gap-3">
+                <Text as="span" variant="body-sm">
+                  {landmark.name}
                 </Text>
-                <Text as="span" color="default">
-                  {getTypeLabel(place.type)}
-                </Text>
-              </div>
-            )}
-            {place.business_status && (
-              <div className="flex justify-between items-center">
-                <Text as="span" variant="body-sm" color="muted">
-                  {labels.status}
-                </Text>
-                <Badge
-                  variant={
-                    place.business_status === "operational"
-                      ? "default"
-                      : place.business_status === "closed_temporarily"
-                        ? "secondary"
-                        : "destructive"
-                  }
-                >
-                  {getStatusLabel(place.business_status)}
-                </Badge>
+                {landmark.distance_meters != null && (
+                  <Text
+                    as="span"
+                    variant="body-sm"
+                    color="muted"
+                    className="tabular-nums shrink-0"
+                  >
+                    {(landmark.distance_meters / 1000).toFixed(1)} km
+                  </Text>
+                )}
               </div>
-            )}
-          </CardContent>
-        </Card>
-      )}
+            ))}
+          </div>
+        </section>
+      ),
+    });
+  }
+
+  return (
+    <div className={cn("space-y-6 pt-4", className)}>
+      {mapSlot}
+      {sections.map((s, i) => (
+        <Fragment key={s.key}>
+          {(i > 0 || mapSlot) && <Divider />}
+          {s.node}
+        </Fragment>
+      ))}
     </div>
   );
 }