feat(finder): AI-powered cafe finder PWA with Next.js 16

Public cafe discovery app: - SEO-optimised pages: home, /cafe/[slug], /search, /city/[city] - AI search bar with natural language queries - Structured data (JSON-LD) for Google rich results - City browsing, rating/filter sidebar, similar cafes - Review listing, full menu preview, working-hours card - Web App Manifest + offline fallback page (PWA) - Next.js 16: params/searchParams typed as Promise<{}> - Fix Lucide icon title→aria-label (type removed upstream) - "use client" on offline page (onClick handler) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-05-27 21:34:47 +03:30
parent d62bb8d3ad
commit 42d4cb896a
32 changed files with 12364 additions and 0 deletions
@@ -0,0 +1,111 @@
+import { Star, MapPin, Clock, BadgeCheck } from "lucide-react";
+import { cn, formatRating, PRICE_TIER_LABELS } from "@/lib/utils";
+import type { CafeDiscoverDto } from "@/lib/types";
+
+interface Props {
+  cafe: CafeDiscoverDto;
+  locale: string;
+  href: string;
+}
+
+export function CafeCard({ cafe, locale, href }: Props) {
+  const isFa = locale === "fa";
+  const name = isFa ? cafe.name : (cafe.name);
+  const priceTier = cafe.discoverProfile.priceTier;
+  const priceLabel = priceTier ? (PRICE_TIER_LABELS[priceTier]?.[isFa ? "fa" : "en"] ?? priceTier) : null;
+
+  return (
+    <a
+      href={href}
+      className="group flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm transition-all hover:shadow-md hover:-translate-y-0.5"
+    >
+      {/* Cover image */}
+      <div className="relative h-44 overflow-hidden bg-gray-100">
+        {cafe.coverImageUrl ? (
+          <img
+            src={cafe.coverImageUrl}
+            alt={name}
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            loading="lazy"
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center bg-gradient-to-br from-brand-50 to-brand-100">
+            <span className="text-4xl font-bold text-brand-200">{name.charAt(0)}</span>
+          </div>
+        )}
+
+        {/* Open/Closed badge */}
+        <div className={cn(
+          "absolute top-3 end-3 rounded-full px-2.5 py-0.5 text-[10px] font-semibold",
+          cafe.isOpenNow
+            ? "bg-emerald-500 text-white"
+            : "bg-gray-800/70 text-white"
+        )}>
+          {cafe.isOpenNow ? (isFa ? "باز" : "Open") : (isFa ? "بسته" : "Closed")}
+        </div>
+
+        {/* Logo overlay */}
+        {cafe.logoUrl && (
+          <div className="absolute bottom-3 start-3 h-10 w-10 overflow-hidden rounded-xl border-2 border-white bg-white shadow-sm">
+            <img src={cafe.logoUrl} alt="" className="h-full w-full object-cover" />
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-1 flex-col p-4">
+        <div className="flex items-start gap-2">
+          <h3 className="flex-1 text-sm font-semibold leading-snug text-gray-900 line-clamp-2">
+            {name}
+            {cafe.isVerified && (
+              <BadgeCheck className="inline ms-1 h-3.5 w-3.5 text-brand-600" />
+            )}
+          </h3>
+        </div>
+
+        {/* City */}
+        {cafe.city && (
+          <p className="mt-1 flex items-center gap-1 text-xs text-gray-400">
+            <MapPin className="h-3 w-3 shrink-0" />
+            {cafe.city}
+          </p>
+        )}
+
+        {/* Tags */}
+        {cafe.discoverProfile.themes.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1">
+            {cafe.discoverProfile.themes.slice(0, 3).map((tag) => (
+              <span
+                key={tag}
+                className="rounded-full bg-brand-50 px-2 py-0.5 text-[10px] font-medium text-brand-700"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Footer row */}
+        <div className="mt-auto flex items-center justify-between pt-3">
+          {/* Rating */}
+          <div className="flex items-center gap-1">
+            <Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
+            <span className="text-sm font-semibold text-gray-900">
+              {formatRating(cafe.averageRating)}
+            </span>
+            {cafe.reviewCount > 0 && (
+              <span className="text-xs text-gray-400">
+                ({cafe.reviewCount})
+              </span>
+            )}
+          </div>
+
+          {/* Price tier */}
+          {priceLabel && (
+            <span className="text-xs text-gray-400">{priceLabel}</span>
+          )}
+        </div>
+      </div>
+    </a>
+  );
+}
@@ -0,0 +1,56 @@
+import { useTranslations, useLocale } from "next-intl";
+import { MapPin } from "lucide-react";
+
+export function Footer() {
+  const t = useTranslations("footer");
+  const locale = useLocale();
+
+  return (
+    <footer className="border-t border-gray-100 bg-white mt-16">
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6">
+        <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
+          {/* Brand */}
+          <div className="col-span-2 sm:col-span-1">
+            <div className="flex items-center gap-2">
+              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-700">
+                <MapPin className="h-3.5 w-3.5 text-white" />
+              </div>
+              <span className="font-bold text-gray-900">
+                {locale === "fa" ? "میزی‌یاب" : "Meezi Finder"}
+              </span>
+            </div>
+            <p className="mt-3 text-xs leading-relaxed text-gray-500">{t("tagline")}</p>
+          </div>
+
+          {/* Links */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">{t("product")}</p>
+            <ul className="mt-3 space-y-2">
+              <li><a href={`/${locale}/search`} className="text-sm text-gray-600 hover:text-brand-700">{t("forCafes")}</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">{t("company")}</p>
+            <ul className="mt-3 space-y-2">
+              <li><a href="https://meezi.ir" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("about")}</a></li>
+              <li><a href="https://meezi.ir/contact" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("contact")}</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">{t("legal")}</p>
+            <ul className="mt-3 space-y-2">
+              <li><a href="https://meezi.ir/privacy" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("privacy")}</a></li>
+              <li><a href="https://meezi.ir/terms" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("terms")}</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-8 border-t border-gray-100 pt-6 text-center text-xs text-gray-400">
+          {t("copyright")}
+        </div>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations, useLocale } from "next-intl";
+import { useRouter, usePathname } from "next/navigation";
+import { Search, Menu, X, Globe, MapPin } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function Navbar() {
+  const t = useTranslations("nav");
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+
+  const otherLocale = locale === "fa" ? "en" : "fa";
+  const otherPath = pathname.replace(`/${locale}`, `/${otherLocale}`);
+
+  const links = [
+    { href: `/${locale}`, label: t("home") },
+    { href: `/${locale}/search`, label: t("search") },
+  ];
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-gray-100 bg-white/95 backdrop-blur-sm">
+      <div className="mx-auto flex h-14 max-w-7xl items-center gap-3 px-4 sm:px-6">
+        {/* Logo */}
+        <a href={`/${locale}`} className="flex items-center gap-2 shrink-0">
+          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-brand-700">
+            <MapPin className="h-4 w-4 text-white" />
+          </div>
+          <span className="text-base font-bold text-gray-900">
+            {locale === "fa" ? "میزی‌یاب" : "Meezi Finder"}
+          </span>
+        </a>
+
+        {/* Desktop nav */}
+        <nav className="hidden flex-1 items-center gap-1 sm:flex ms-4">
+          {links.map((l) => (
+            <a
+              key={l.href}
+              href={l.href}
+              className={cn(
+                "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+                pathname === l.href
+                  ? "bg-brand-50 text-brand-700"
+                  : "text-gray-600 hover:bg-gray-100"
+              )}
+            >
+              {l.label}
+            </a>
+          ))}
+        </nav>
+
+        <div className="flex flex-1 items-center justify-end gap-2 sm:flex-none">
+          {/* Search shortcut */}
+          <a
+            href={`/${locale}/search`}
+            className="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-400 transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 sm:min-w-[180px]"
+          >
+            <Search className="h-3.5 w-3.5 shrink-0" />
+            <span className="hidden sm:inline">
+              {locale === "fa" ? "جستجوی کافه..." : "Search cafes..."}
+            </span>
+          </a>
+
+          {/* Language toggle */}
+          <a
+            href={otherPath}
+            className="flex items-center gap-1 rounded-lg px-2 py-1.5 text-xs font-medium text-gray-500 transition hover:bg-gray-100"
+            title={otherLocale === "fa" ? "فارسی" : "English"}
+          >
+            <Globe className="h-3.5 w-3.5" />
+            <span>{otherLocale === "fa" ? "FA" : "EN"}</span>
+          </a>
+
+          {/* Mobile menu toggle */}
+          <button
+            className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 sm:hidden"
+            onClick={() => setOpen(!open)}
+            aria-label={open ? t("closeMenu") : t("openMenu")}
+          >
+            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="border-t border-gray-100 bg-white px-4 py-3 sm:hidden">
+          {links.map((l) => (
+            <a
+              key={l.href}
+              href={l.href}
+              onClick={() => setOpen(false)}
+              className="block rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
+            >
+              {l.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </header>
+  );
+}
@@ -0,0 +1,109 @@
+"use client";
+
+import { useState, useRef, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import { Search, Loader2, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const SUGGESTIONS_FA = [
+  "کافه آروم با وای‌فای خوب مناسب کار",
+  "کافه لوکس مناسب قرار دونفره",
+  "رستوران سنتی با فضای خانوادگی",
+  "کافه با نور طبیعی و صبحانه خوب",
+  "کافه پت‌فرندلی در تهران",
+];
+
+const SUGGESTIONS_EN = [
+  "quiet cafe with good WiFi for working",
+  "upscale cafe for a date",
+  "traditional restaurant family-friendly",
+  "bright cafe with great breakfast",
+  "pet-friendly cafe in Tehran",
+];
+
+interface Props {
+  initialValue?: string;
+  initialCity?: string;
+  autoFocus?: boolean;
+  large?: boolean;
+}
+
+export function AiSearchBar({ initialValue = "", initialCity = "", autoFocus, large }: Props) {
+  const locale = useLocale();
+  const t = useTranslations("home");
+  const router = useRouter();
+  const [value, setValue] = useState(initialValue);
+  const [isPending, startTransition] = useTransition();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const suggestions = locale === "fa" ? SUGGESTIONS_FA : SUGGESTIONS_EN;
+
+  function submit(q: string) {
+    const params = new URLSearchParams();
+    if (q.trim()) params.set("q", q.trim());
+    if (initialCity) params.set("city", initialCity);
+    startTransition(() => {
+      router.push(`/${locale}/search?${params.toString()}`);
+    });
+  }
+
+  return (
+    <div className="w-full">
+      {/* Search input */}
+      <div className={cn(
+        "relative flex items-center overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm",
+        "transition-all focus-within:border-brand-400 focus-within:shadow-md focus-within:shadow-brand-100",
+        large && "rounded-2xl shadow-lg"
+      )}>
+        <div className="flex items-center gap-2 ps-4">
+          <Sparkles className="h-4 w-4 shrink-0 text-brand-600" />
+        </div>
+        <input
+          ref={inputRef}
+          type="search"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && submit(value)}
+          placeholder={t("searchPlaceholder")}
+          autoFocus={autoFocus}
+          className={cn(
+            "flex-1 bg-transparent px-3 py-3 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none",
+            large && "py-4 text-base"
+          )}
+        />
+        <button
+          onClick={() => submit(value)}
+          disabled={isPending}
+          className={cn(
+            "m-1.5 flex items-center gap-1.5 rounded-xl bg-brand-700 px-4 py-2 text-sm font-semibold text-white",
+            "transition hover:bg-brand-800 disabled:opacity-70",
+            large && "px-5 py-2.5"
+          )}
+        >
+          {isPending ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Search className="h-4 w-4" />
+          )}
+          <span className="hidden sm:inline">{t("searchBtn")}</span>
+        </button>
+      </div>
+
+      {/* Suggestion chips */}
+      {large && (
+        <div className="mt-3 flex flex-wrap gap-2">
+          {suggestions.map((s) => (
+            <button
+              key={s}
+              onClick={() => { setValue(s); submit(s); }}
+              className="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs text-gray-600 transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700"
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,86 @@
+import type { CafePublicDto } from "@/lib/types";
+
+interface Props {
+  cafe: CafePublicDto;
+  locale: string;
+  baseUrl: string;
+}
+
+export function CafeJsonLd({ cafe, locale, baseUrl }: Props) {
+  const name = locale === "en" && cafe.nameEn ? cafe.nameEn : cafe.name;
+
+  const openingHours: string[] = [];
+  if (cafe.workingHours) {
+    const days = cafe.workingHours;
+    const dayMap: [string, keyof typeof days][] = [
+      ["Sa", "sat"], ["Su", "sun"], ["Mo", "mon"],
+      ["Tu", "tue"], ["We", "wed"], ["Th", "thu"], ["Fr", "fri"],
+    ];
+    for (const [abbr, key] of dayMap) {
+      const d = days[key];
+      if (d?.isOpen && d.open && d.close) {
+        openingHours.push(`${abbr} ${d.open}-${d.close}`);
+      }
+    }
+  }
+
+  const schema: Record<string, unknown> = {
+    "@context": "https://schema.org",
+    "@type": "CafeOrCoffeeShop",
+    name,
+    description: cafe.description ?? undefined,
+    url: `${baseUrl}/${locale}/cafe/${cafe.slug}`,
+    ...(cafe.logoUrl ? { logo: cafe.logoUrl } : {}),
+    ...(cafe.coverImageUrl ? { image: [cafe.coverImageUrl, ...(cafe.galleryUrls ?? [])] } : {}),
+    ...(cafe.address ? { address: { "@type": "PostalAddress", streetAddress: cafe.address, addressLocality: cafe.city ?? undefined, addressCountry: "IR" } } : {}),
+    ...(cafe.phone ? { telephone: cafe.phone } : {}),
+    ...(openingHours.length ? { openingHours } : {}),
+    ...(cafe.instagramHandle ? { sameAs: [`https://instagram.com/${cafe.instagramHandle}`] } : {}),
+    ...(cafe.websiteUrl ? { url: cafe.websiteUrl } : {}),
+    ...(cafe.reviewCount > 0 ? {
+      aggregateRating: {
+        "@type": "AggregateRating",
+        ratingValue: cafe.averageRating.toFixed(1),
+        reviewCount: cafe.reviewCount,
+        bestRating: "5",
+        worstRating: "1",
+      },
+    } : {}),
+    ...(cafe.discoverProfile.themes.length ? {
+      servesCuisine: cafe.discoverProfile.themes,
+    } : {}),
+    priceRange: (() => {
+      const tier = cafe.discoverProfile.priceTier;
+      if (tier === "budget") return "﷼";
+      if (tier === "moderate") return "﷼﷼";
+      if (tier === "upscale") return "﷼﷼﷼";
+      if (tier === "luxury") return "﷼﷼﷼﷼";
+      return undefined;
+    })(),
+  };
+
+  // BreadcrumbList
+  const breadcrumb = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+      { "@type": "ListItem", position: 1, name: locale === "fa" ? "خانه" : "Home", item: `${baseUrl}/${locale}` },
+      { "@type": "ListItem", position: 2, name: locale === "fa" ? "جستجو" : "Search", item: `${baseUrl}/${locale}/search` },
+      ...(cafe.city ? [{ "@type": "ListItem", position: 3, name: cafe.city, item: `${baseUrl}/${locale}/city/${cafe.city.toLowerCase()}` }] : []),
+      { "@type": "ListItem", position: cafe.city ? 4 : 3, name, item: `${baseUrl}/${locale}/cafe/${cafe.slug}` },
+    ],
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }}
+      />
+    </>
+  );
+}