feat: shared, more pleasing empty-state component across the app
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:
@@ -3,11 +3,12 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Plus, Trash2, AlertTriangle } from "lucide-react";
|
||||
import { Plus, Trash2, AlertTriangle, Package } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { PantryScanDialog } from "@/components/pantry/pantry-scan-dialog";
|
||||
import { EmptyState } from "@/components/shared/empty-state";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
@@ -98,7 +99,7 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
|
||||
|
||||
{/* Item list */}
|
||||
{items.length === 0 ? (
|
||||
<p className="text-muted-foreground text-sm">{t("empty")}</p>
|
||||
<EmptyState icon={Package} title={t("empty")} description={t("emptyDescription")} compact />
|
||||
) : (
|
||||
<div className="rounded-xl border divide-y">
|
||||
{sorted.map((item) => {
|
||||
|
||||
Reference in New Issue
Block a user