53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { CheckCircle2 } from 'lucide-react';
|
|
import { WishCard } from '@/components/WishCard/WishCard';
|
|
import {
|
|
useDeleteWish,
|
|
useDuplicateWish,
|
|
useWishes,
|
|
} from '@/features/wishes/wishes.hooks';
|
|
import { useI18n } from '@/i18n/i18n';
|
|
|
|
export function CompletedPage() {
|
|
const { t } = useI18n();
|
|
const { data, isLoading } = useWishes('completed');
|
|
const duplicate = useDuplicateWish();
|
|
const remove = useDeleteWish();
|
|
|
|
return (
|
|
<div className="grid gap-6">
|
|
<section className="page-section">
|
|
<h1 className="page-section__title">{t('completed.title')}</h1>
|
|
<p className="page-section__text">
|
|
{t('completed.description')}
|
|
</p>
|
|
</section>
|
|
|
|
{isLoading && <div className="text-muted">{t('common.loading')}</div>}
|
|
|
|
{!isLoading && data && data.length === 0 && (
|
|
<div className="empty-state">
|
|
<CheckCircle2 className="empty-state__icon" />
|
|
<h2 className="empty-state__title">{t('completed.emptyTitle')}</h2>
|
|
<p className="empty-state__text">
|
|
{t('completed.emptyText')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{data && data.length > 0 && (
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
{data.map((wish) => (
|
|
<WishCard
|
|
key={wish.id}
|
|
wish={wish}
|
|
view="owner"
|
|
onDuplicate={() => duplicate.mutate(wish.id)}
|
|
onDelete={() => remove.mutate(wish.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|