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>
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
"use client";
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
import { FolderOpen, Flame } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { NewCollectionButton } from "@/components/social/new-collection-button";
|
|
import { EmptyState } from "@/components/shared/empty-state";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Collection = {
|
|
id: string;
|
|
name: string;
|
|
description: string | null;
|
|
isPublic: boolean;
|
|
recipeCount: number;
|
|
};
|
|
|
|
type Props = {
|
|
collections: Collection[];
|
|
};
|
|
|
|
export function CollectionsPageContent({ collections }: Props) {
|
|
const t = useTranslations("collections");
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<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 items-center gap-2">
|
|
<Link href="/collections/explore" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-1.5")}>
|
|
<Flame className="h-4 w-4 text-orange-500" />
|
|
{t("discoverTitle")}
|
|
</Link>
|
|
<NewCollectionButton />
|
|
</div>
|
|
</div>
|
|
|
|
{collections.length === 0 ? (
|
|
<EmptyState
|
|
icon={FolderOpen}
|
|
title={t("empty")}
|
|
description={t("emptyDescription")}
|
|
actionSlot={<NewCollectionButton />}
|
|
/>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{collections.map((col) => (
|
|
<Link key={col.id} href={`/collections/${col.id}`} className="group rounded-xl border p-4 hover:shadow-sm transition-shadow space-y-2">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h2 className="font-semibold group-hover:text-primary transition-colors line-clamp-1">{col.name}</h2>
|
|
{col.isPublic && <Badge variant="secondary" className="text-xs shrink-0">{t("public")}</Badge>}
|
|
</div>
|
|
{col.description && <p className="text-sm text-muted-foreground line-clamp-2">{col.description}</p>}
|
|
<p className="text-xs text-muted-foreground">
|
|
{col.recipeCount !== 1 ? t("recipeCountPlural", { count: col.recipeCount }) : t("recipeCount", { count: col.recipeCount })}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|