feat: surface pantry-expiry recipe suggestions

Pantry page now shows a "Use it up soon" widget with recipes that use soon-to-expire pantry items, across the user's own recipes plus public/ unlisted ones (the existing /recipes/can-cook page only looked at the user's own). Extracted the matching/scoring logic shared by both into lib/pantry-match.ts. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-09 15:26:44 +02:00
parent f2a0c20f07
commit cd444d4d23
6 changed files with 141 additions and 56 deletions
@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Clock } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+type Suggestion = {
+  id: string;
+  title: string;
+  photoUrl: string | null;
+  usesExpiring: string[];
+};
+
+export function ExpiringSoonSuggestions({ suggestions }: { suggestions: Suggestion[] }) {
+  const t = useTranslations("pantry");
+
+  if (suggestions.length === 0) return null;
+
+  return (
+    <div className="rounded-xl border p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <h2 className="font-semibold flex items-center gap-2">
+          <Clock className="h-4 w-4 text-orange-500" />
+          {t("expiringSoonSuggestionsTitle")}
+        </h2>
+        <Link href="/recipes/can-cook" className="text-sm text-primary hover:underline">
+          {t("seeAll")}
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+        {suggestions.map((s) => (
+          <Link
+            key={s.id}
+            href={`/recipes/${s.id}`}
+            className="rounded-lg border overflow-hidden hover:bg-accent transition-colors"
+          >
+            {s.photoUrl ? (
+              <img src={s.photoUrl} alt="" className="h-24 w-full object-cover" />
+            ) : (
+              <div className="h-24 w-full bg-muted" />
+            )}
+            <div className="p-2 space-y-1">
+              <p className="text-sm font-medium truncate">{s.title}</p>
+              <Badge variant="outline" className="text-orange-500 border-orange-500 gap-1 text-[11px]">
+                <Clock className="h-3 w-3" />
+                {s.usesExpiring.slice(0, 2).join(", ")}
+              </Badge>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}