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>
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import type { ComponentType, ReactNode } from "react";
|
|
import Link from "next/link";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Action = {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
|
|
/**
|
|
* Shared "nothing here yet" state — replaces the ad-hoc dashed-border boxes that used
|
|
* to be copy-pasted per page (icon + one line of muted text, inconsistent spacing,
|
|
* only some had a CTA). One consistent, warmer treatment: icon in a soft tinted
|
|
* circle, a real heading instead of just a muted caption, and an optional primary/
|
|
* secondary action.
|
|
*/
|
|
export function EmptyState({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
action,
|
|
secondaryAction,
|
|
actionSlot,
|
|
compact = false,
|
|
className,
|
|
}: {
|
|
icon: ComponentType<{ className?: string }>;
|
|
title: string;
|
|
description?: string;
|
|
action?: Action;
|
|
secondaryAction?: Action;
|
|
/** Arbitrary action element (e.g. a button that opens a dialog) instead of a plain Link. */
|
|
actionSlot?: ReactNode;
|
|
/** Smaller variant for empty states nested inside a section rather than a full page. */
|
|
compact?: boolean;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col items-center justify-center text-center rounded-2xl border border-border/60 bg-gradient-to-b from-muted/40 to-transparent",
|
|
compact ? "gap-2 px-6 py-10" : "gap-3 px-6 py-16",
|
|
className
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"flex items-center justify-center rounded-full bg-primary/10 text-primary",
|
|
compact ? "h-11 w-11" : "h-14 w-14"
|
|
)}>
|
|
<Icon className={compact ? "h-5 w-5" : "h-6 w-6"} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className={cn("font-semibold text-foreground", compact ? "text-sm" : "text-base")}>{title}</p>
|
|
{description && (
|
|
<p className={cn("text-muted-foreground max-w-sm text-balance", compact ? "text-xs" : "text-sm")}>
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{(action || secondaryAction || actionSlot) && (
|
|
<div className="flex items-center gap-2 mt-2">
|
|
{action && (
|
|
<Link href={action.href} className={cn(buttonVariants({ size: compact ? "sm" : "default" }))}>
|
|
{action.label}
|
|
</Link>
|
|
)}
|
|
{secondaryAction && (
|
|
<Link href={secondaryAction.href} className={cn(buttonVariants({ variant: "outline", size: compact ? "sm" : "default" }))}>
|
|
{secondaryAction.label}
|
|
</Link>
|
|
)}
|
|
{actionSlot}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|