arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: shared, more pleasing empty-state component across the app

Browse Source 
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>
This commit is contained in:
Arnaud
2026-07-10 16:30:56 +02:00
parent e0d39c86ef
commit 8b749f432e
13 changed files with 163 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/recipe/recipes-empty-state.tsx
+15 -23
View File
@@ -1,9 +1,7 @@
"use client";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { PlusCircle } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
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");
@@ -14,24 +12,18 @@ export function RecipesEmptyState({ query, count }: { query: string; count: numb
</p>
) : null;
}
return (
<div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
{query ? (
<>
<p className="text-muted-foreground text-sm">{t("noMatch")} &ldquo;{query}&rdquo;</p>
<Link href="/recipes" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
{t("clearSearch")}
</Link>
</>
) : (
<>
<p className="text-muted-foreground text-sm">{t("noRecipes")}</p>
<Link href="/recipes/new" className={cn(buttonVariants({ size: "sm" }))}>
<PlusCircle className="h-4 w-4" />
{t("createFirst")}
</Link>
</>
)}
</div>
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" }}
/>
);
}