293 lines
13 KiB
TypeScript
293 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { OptimizedImage } from "@/components/OptimizedImage";
|
|
import { Product } from "@/lib/openFoodFactsApi";
|
|
import { AlertTriangle } from "lucide-react";
|
|
import { formatNutritionData } from "@/lib/openFoodFactsApi";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ProductCardProps {
|
|
product: Product;
|
|
className?: string;
|
|
priority?: number;
|
|
currentPage?: number;
|
|
variant?: "default" | "mobile";
|
|
}
|
|
|
|
const NUTRI_GRADE_CLASS: Record<string, string> = {
|
|
a: "a", b: "b", c: "c", d: "d", e: "e",
|
|
};
|
|
|
|
function getVerdict(grade?: string, nova?: number): { label: string; colorClass: string } {
|
|
if (grade === "a" || grade === "b") return { label: "Recomendado", colorClass: "text-[var(--nutri-a)]" };
|
|
if (grade === "c" || nova === 3) return { label: "Com moderação", colorClass: "text-[var(--nutri-c)]" };
|
|
return { label: "Evitar", colorClass: "text-[var(--nutri-e)]" };
|
|
}
|
|
|
|
function getVerdictDotBg(grade?: string, nova?: number): string {
|
|
if (grade === "a" || grade === "b") return "bg-[var(--nutri-a)]";
|
|
if (grade === "c" || nova === 3) return "bg-[var(--nutri-c)]";
|
|
return "bg-[var(--nutri-e)]";
|
|
}
|
|
|
|
function getImageUrl(product: Product): string {
|
|
return (
|
|
product.image_front_url ||
|
|
product.image_front_small_url ||
|
|
product.image_url ||
|
|
product.image_small_url ||
|
|
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect fill='%23f3efe7' width='400' height='400'/%3E%3Ctext fill='%23a39c93' font-family='Georgia,serif' font-size='16' x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle'%3ESem imagem%3C/text%3E%3C/svg%3E"
|
|
);
|
|
}
|
|
|
|
/* ── Nutri-Letter hero circle ───────────────────────────────────────────── */
|
|
function NutriLetter({ grade, size = 56 }: { grade: string; size?: number }) {
|
|
const g = grade?.toLowerCase();
|
|
if (!g || !NUTRI_GRADE_CLASS[g]) return null;
|
|
return (
|
|
<div
|
|
className={`nutri-letter ${g}`}
|
|
style={{ width: size, height: size, fontSize: Math.round(size * 0.62), flexShrink: 0 }}
|
|
aria-label={`Nutri-Score ${g.toUpperCase()}`}
|
|
>
|
|
{g.toUpperCase()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ── Verdict dot — pure Tailwind, no inline style ──────────────────────── */
|
|
function VerdictDot({ grade, nova }: { grade?: string; nova?: number }) {
|
|
const { label, colorClass } = getVerdict(grade, nova);
|
|
const dotBg = getVerdictDotBg(grade, nova);
|
|
return (
|
|
<span className={cn("inline-flex items-center gap-1.5 text-[11px] font-semibold", colorClass)}>
|
|
<span className={cn("w-1.5 h-1.5 rounded-full shrink-0", dotBg)} />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
MOBILE VARIANT — horizontal row
|
|
All hover/focus states are pure CSS via Tailwind so keyboard + touch work
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
|
|
function MobileCard({ product, className, priority, currentPage }: Omit<ProductCardProps, "variant">) {
|
|
const imageUrl = getImageUrl(product);
|
|
const grade = product.nutrition_grades?.toLowerCase();
|
|
const nova = product.nova_group;
|
|
const allergenCount =
|
|
product.allergens_tags?.filter((a) =>
|
|
["gluten", "milk", "eggs", "nuts", "peanuts", "soy"].some((c) =>
|
|
a.toLowerCase().includes(c)
|
|
)
|
|
).length ?? 0;
|
|
|
|
return (
|
|
<Link
|
|
href={`/produto/${product.code}`}
|
|
className={cn(
|
|
"product-card group flex gap-3.5 items-center p-3.5",
|
|
"bg-[var(--ink-0)] border border-[var(--ink-200)] rounded-[14px]",
|
|
/* Hover — CSS only, works for keyboard focus-visible too */
|
|
"transition-all duration-200 ease-out",
|
|
"hover:border-[var(--ink-400)] hover:-translate-y-px hover:shadow-[0_6px_20px_-10px_rgba(0,0,0,0.14)]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ink-0)]",
|
|
"active:scale-[0.99] active:shadow-none",
|
|
className
|
|
)}
|
|
aria-label={`${product.product_name || "Produto"} — ver detalhes`}
|
|
>
|
|
{/* Thumb */}
|
|
<div className="relative shrink-0 w-[72px] h-[72px] rounded-[10px] overflow-hidden bg-[var(--ink-100)]">
|
|
<OptimizedImage
|
|
src={imageUrl}
|
|
alt={product.product_name || "Produto"}
|
|
fill
|
|
priority={priority}
|
|
onPageChange={currentPage}
|
|
className="object-contain p-1.5"
|
|
sizes="72px"
|
|
placeholder="empty"
|
|
/>
|
|
</div>
|
|
|
|
{/* Center text */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="eyebrow-mono truncate mb-0.5">
|
|
{product.brands || "Marca desconhecida"}
|
|
</div>
|
|
<div className="text-[15px] font-medium text-[var(--ink-900)] truncate mb-2 tracking-[-0.005em]">
|
|
{product.product_name || "Produto sem nome"}
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<VerdictDot grade={grade} nova={nova} />
|
|
{nova && (
|
|
<>
|
|
<span className="text-[var(--ink-300)]">·</span>
|
|
<span className="eyebrow-mono text-[var(--ink-500)]">NOVA {nova}</span>
|
|
</>
|
|
)}
|
|
{allergenCount > 0 && (
|
|
<>
|
|
<span className="text-[var(--ink-300)]">·</span>
|
|
<span className="inline-flex items-center gap-1 text-[11px] text-[var(--warn)] font-medium">
|
|
<AlertTriangle className="w-2.5 h-2.5" strokeWidth={2} />
|
|
{allergenCount} alérgeno{allergenCount > 1 ? "s" : ""}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nutri-Score letter */}
|
|
{grade && NUTRI_GRADE_CLASS[grade] && <NutriLetter grade={grade} size={52} />}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
DEFAULT VARIANT — portrait card, image hero
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
|
|
function DefaultCard({ product, className, priority, currentPage }: Omit<ProductCardProps, "variant">) {
|
|
const imageUrl = getImageUrl(product);
|
|
const nutritionData = formatNutritionData(product);
|
|
const grade = product.nutrition_grades?.toLowerCase();
|
|
const nova = product.nova_group;
|
|
const allergenCount =
|
|
product.allergens_tags?.filter((a) =>
|
|
["gluten", "milk", "eggs", "nuts", "peanuts", "soy"].some((c) =>
|
|
a.toLowerCase().includes(c)
|
|
)
|
|
).length ?? 0;
|
|
|
|
return (
|
|
<Link
|
|
href={`/produto/${product.code}`}
|
|
className={cn(
|
|
/* Layout */
|
|
"product-card group flex flex-col h-full",
|
|
/* Surface */
|
|
"bg-[var(--ink-0)] border border-[var(--ink-200)] rounded-2xl overflow-hidden",
|
|
/* Transitions — one rule governs border + lift + shadow */
|
|
"transition-all duration-200 ease-out",
|
|
/* Hover — CSS, no JS */
|
|
"hover:border-[var(--ink-400)] hover:-translate-y-0.5 hover:shadow-[0_12px_32px_-14px_rgba(0,0,0,0.15)]",
|
|
/* Keyboard focus ring — WCAG 2.4.7 compliant */
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
|
|
/* Press feedback */
|
|
"active:scale-[0.99] active:shadow-none",
|
|
className
|
|
)}
|
|
aria-label={`${product.product_name || "Produto"} — ver detalhes`}
|
|
>
|
|
{/* ── Hero image area ─────────────────────────────────────────────── */}
|
|
<div className="relative aspect-[5/4] bg-[var(--ink-50)] border-b border-[var(--ink-200)] overflow-hidden">
|
|
{/* Image zooms on hover because parent now HAS the `group` class */}
|
|
<OptimizedImage
|
|
src={imageUrl}
|
|
alt={product.product_name || "Produto"}
|
|
fill
|
|
priority={priority}
|
|
onPageChange={currentPage}
|
|
className="object-contain p-6 transition-transform duration-500 ease-out group-hover:scale-105"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
/>
|
|
|
|
{/* Nutri-Score — top-right */}
|
|
{grade && NUTRI_GRADE_CLASS[grade] && (
|
|
<div className="absolute top-3.5 right-3.5 drop-shadow-md">
|
|
<NutriLetter grade={grade} size={52} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Allergen chip — top-left */}
|
|
{allergenCount > 0 && (
|
|
<div className="absolute top-3.5 left-3.5">
|
|
<span className="rd-chip warn" style={{ padding: "4px 9px", fontSize: 11 }}>
|
|
<AlertTriangle className="w-3 h-3" strokeWidth={2} />
|
|
{allergenCount}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Card body ──────────────────────────────────────────────────── */}
|
|
<div className="flex flex-col gap-3.5 p-[18px] flex-1">
|
|
|
|
{/* Brand + product name */}
|
|
<div>
|
|
<div className="eyebrow-mono truncate mb-1">
|
|
{product.brands || "Marca desconhecida"}
|
|
</div>
|
|
<h3
|
|
className="font-display text-[22px] leading-[1.15] tracking-[-0.01em] text-[var(--ink-900)] line-clamp-2 m-0"
|
|
>
|
|
{product.product_name || "Nome não disponível"}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* ── Nutrition mini-bar: 4 columns ─────────────────────────────── */}
|
|
{nutritionData && (
|
|
<div className="grid grid-cols-4 border-y border-[var(--ink-200)]">
|
|
{[
|
|
{ l: "kcal", v: nutritionData.energy },
|
|
{ l: "Açúcar", v: nutritionData.sugars },
|
|
{ l: "Gord.", v: nutritionData.fat },
|
|
{ l: "Sódio", v: nutritionData.sodium },
|
|
].map((n, i) =>
|
|
n.v ? (
|
|
<div
|
|
key={n.l}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center py-3 px-1.5 min-w-0 text-center",
|
|
i < 3 && "border-r border-[var(--ink-200)]"
|
|
)}
|
|
>
|
|
<span className="font-display text-base text-[var(--ink-900)] leading-none truncate max-w-full">
|
|
{n.v}
|
|
</span>
|
|
<span className="eyebrow-mono text-[9px] text-[var(--ink-500)] mt-1.5">
|
|
{n.l}
|
|
</span>
|
|
</div>
|
|
) : null
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer row: verdict + nova badge */}
|
|
<div className="flex items-center justify-between mt-auto">
|
|
<VerdictDot grade={grade} nova={nova} />
|
|
{nova && (
|
|
<span className="eyebrow-mono text-[var(--ink-500)]">
|
|
NOVA {nova}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* CTA — styled as ghost button, inherits the card's hover context */}
|
|
<div
|
|
className={cn(
|
|
"block text-center py-2.5 text-[13px] font-medium text-[var(--ink-700)] no-underline",
|
|
"border border-[var(--ink-200)] rounded-[10px]",
|
|
"transition-colors duration-150",
|
|
/* Group-hover darkens the CTA border/text for free */
|
|
"group-hover:border-[var(--ink-400)] group-hover:text-[var(--ink-900)]"
|
|
)}
|
|
aria-hidden="true" /* Link is on the <Link> wrapper above */
|
|
tabIndex={-1}
|
|
>
|
|
Ver detalhes →
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
/* ── Public export ──────────────────────────────────────────────────────── */
|
|
export function ProductCard({ variant = "default", ...props }: ProductCardProps) {
|
|
if (variant === "mobile") return <MobileCard {...props} />;
|
|
return <DefaultCard {...props} />;
|
|
}
|