Arnaud
8b749f432e
Every "nothing here" page had its own copy-pasted dashed-border box — icon + one muted line, inconsistent (some had a CTA, some didn't, no description text anywhere). Replaced with one shared EmptyState component: icon in a soft tinted circle, a real heading plus optional description, and primary/secondary actions (either a Link or an arbitrary action slot for things like "New Collection" that open a dialog rather than navigate). Applied to: recipes (no recipes / no search match), favorites, feed (no one followed / no new posts / trending / for-you), collections (index + detail), shopping lists, pantry, notifications, can-cook. Left the small inline "no trending"/"no recent" lines inside Explore's already-labeled sections and the notification-bell dropdown alone — different context, a full empty-state box would be heavier than the space warrants. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { Heart } from "lucide-react";
|
|
import { FavoriteRecipeCard, type FavoriteRecipe } from "@/components/recipe/favorite-recipe-card";
|
|
import { EmptyState } from "@/components/shared/empty-state";
|
|
|
|
export function FavoritesGrid({
|
|
initialRecipes,
|
|
emptyTitle,
|
|
emptyDescription,
|
|
}: {
|
|
initialRecipes: FavoriteRecipe[];
|
|
emptyTitle: string;
|
|
emptyDescription: string;
|
|
}) {
|
|
const t = useTranslations("recipes");
|
|
const [recipes, setRecipes] = useState(initialRecipes);
|
|
|
|
function handleUnfavorited(recipeId: string) {
|
|
setRecipes((prev) => prev.filter((r) => r.id !== recipeId));
|
|
}
|
|
|
|
if (recipes.length === 0) {
|
|
return <EmptyState icon={Heart} title={emptyTitle} description={emptyDescription} action={{ label: t("exploreRecipes"), href: "/explore" }} />;
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 items-start">
|
|
{recipes.map((recipe) => (
|
|
<FavoriteRecipeCard key={recipe.id} recipe={recipe} onUnfavorited={handleUnfavorited} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|