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/can-cook-content.tsx
+9 -16
View File
@@ -3,11 +3,10 @@
import Link from "next/link";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { Package, Clock } from "lucide-react";
import { Package, Clock, ChefHat } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { EmptyState } from "@/components/shared/empty-state";
type ScoredItem = {
recipe: {
@@ -82,13 +81,7 @@ export function CanCookContent({ pantryCount, scored }: Props) {
<h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
<p className="text-muted-foreground mt-1">{t("subtitle")}</p>
</div>
<div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
<Package className="h-8 w-8 text-muted-foreground" />
<p className="text-muted-foreground text-sm">{t("emptyPantry")}</p>
<Link href="/pantry" className={cn(buttonVariants({ size: "sm" }))}>
{t("addPantryItems")}
</Link>
</div>
<EmptyState icon={Package} title={t("emptyPantry")} action={{ label: t("addPantryItems"), href: "/pantry" }} />
</div>
);
}
@@ -129,12 +122,12 @@ export function CanCookContent({ pantryCount, scored }: Props) {
)}
{canCook.length === 0 && almostCook.length === 0 && (
<div className="flex flex-col items-center justify-center h-48 border-2 border-dashed rounded-xl gap-3">
<p className="text-muted-foreground text-sm">{t("noMatches")}</p>
<Link href="/pantry" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
{t("addPantryItems")}
</Link>
</div>
<EmptyState
icon={ChefHat}
title={t("noMatches")}
secondaryAction={{ label: t("addPantryItems"), href: "/pantry" }}
compact
/>
)}
{rest.length > 0 && (
apps/web/components/recipe/favorites-grid.tsx
+8 -8
View File
@@ -1,16 +1,21 @@
"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,
emptyLabel,
emptyTitle,
emptyDescription,
}: {
initialRecipes: FavoriteRecipe[];
emptyLabel: string;
emptyTitle: string;
emptyDescription: string;
}) {
const t = useTranslations("recipes");
const [recipes, setRecipes] = useState(initialRecipes);
function handleUnfavorited(recipeId: string) {
@@ -18,12 +23,7 @@ export function FavoritesGrid({
}
if (recipes.length === 0) {
return (
<div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
<Heart className="h-12 w-12 text-muted-foreground/40" />
<p className="text-muted-foreground text-sm text-center max-w-xs">{emptyLabel}</p>
</div>
);
return <EmptyState icon={Heart} title={emptyTitle} description={emptyDescription} action={{ label: t("exploreRecipes"), href: "/explore" }} />;
}
return (
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" }}
/>
);
}