Arnaud
b730dfac41
Title shared a flex row with the difficulty badge, shrinking its available width — now full-width on its own line with badge below, plus a md: grid-column step so cards don't stay stuck at 2 columns until the lg breakpoint like the Recipes page grid does. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Clock, ChefHat, Star } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const DIFFICULTY_COLORS: Record<string, string> = {
|
|
easy: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
|
medium: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
|
|
hard: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
|
|
};
|
|
|
|
export type SearchResultRecipe = {
|
|
id: string;
|
|
title: string;
|
|
description?: string | null;
|
|
difficulty: string | null;
|
|
prepMins: number | null;
|
|
cookMins: number | null;
|
|
authorName: string | null;
|
|
avgRating?: number | null;
|
|
ratingCount?: number;
|
|
};
|
|
|
|
/**
|
|
* Shared card for lightweight recipe search results (no cover photo/visibility
|
|
* data available) — used by the search and explore pages, which previously
|
|
* each had their own near-identical inline copy of this component.
|
|
*/
|
|
export function SearchResultCard({ recipe, className }: { recipe: SearchResultRecipe; className?: string }) {
|
|
const t = useTranslations("recipe");
|
|
const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
|
|
const difficultyLabel = recipe.difficulty === "easy" || recipe.difficulty === "medium" || recipe.difficulty === "hard"
|
|
? t(`difficulty.${recipe.difficulty}`)
|
|
: recipe.difficulty;
|
|
|
|
return (
|
|
<Link
|
|
href={`/recipes/${recipe.id}`}
|
|
className={cn(
|
|
"group block rounded-lg border bg-card p-4 shadow-sm transition-shadow hover:shadow-md",
|
|
className
|
|
)}
|
|
>
|
|
<h3 className="font-semibold text-sm leading-tight text-card-foreground group-hover:text-primary line-clamp-2">
|
|
{recipe.title}
|
|
</h3>
|
|
{recipe.difficulty && (
|
|
<Badge
|
|
variant="secondary"
|
|
className={`mt-1.5 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
|
|
>
|
|
{difficultyLabel}
|
|
</Badge>
|
|
)}
|
|
{recipe.description && (
|
|
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
|
|
)}
|
|
{!!recipe.ratingCount && recipe.avgRating != null && (
|
|
<div className="mt-1.5 flex items-center gap-1 text-xs text-muted-foreground">
|
|
<Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
|
|
<span className="font-medium text-foreground">{recipe.avgRating.toFixed(1)}</span>
|
|
<span>({recipe.ratingCount})</span>
|
|
</div>
|
|
)}
|
|
<div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
|
|
{totalMins > 0 && (
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="h-3.5 w-3.5" />
|
|
{t("total", { mins: totalMins })}
|
|
</span>
|
|
)}
|
|
{recipe.authorName && (
|
|
<span className="flex items-center gap-1">
|
|
<ChefHat className="h-3.5 w-3.5" />
|
|
{recipe.authorName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|