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>
30 lines
892 B
TypeScript
30 lines
892 B
TypeScript
"use client";
|
|
import { useTranslations } from "next-intl";
|
|
import { BookOpen, Search } from "lucide-react";
|
|
import { EmptyState } from "@/components/shared/empty-state";
|
|
|
|
export function RecipesEmptyState({ query, count }: { query: string; count: number }) {
|
|
const t = useTranslations("recipes");
|
|
if (count > 0) {
|
|
return query ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{count} {count !== 1 ? t("resultPlural") : t("resultSingular")} {t("for")} “{query}”
|
|
</p>
|
|
) : null;
|
|
}
|
|
return query ? (
|
|
<EmptyState
|
|
icon={Search}
|
|
title={`${t("noMatch")} "${query}"`}
|
|
action={{ label: t("clearSearch"), href: "/recipes" }}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
icon={BookOpen}
|
|
title={t("noRecipes")}
|
|
description={t("emptyStateDescription")}
|
|
action={{ label: t("createFirst"), href: "/recipes/new" }}
|
|
/>
|
|
);
|
|
}
|