52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Check, Sparkles, Archive, Trash2 } from 'lucide-react';
|
|
import type { Wish } from '@family-wishlist/shared';
|
|
import { cn } from '@/lib/cn';
|
|
|
|
interface Props {
|
|
wish: Wish & { isNewForOwner?: boolean };
|
|
view: 'owner' | 'guest';
|
|
className?: string;
|
|
}
|
|
|
|
export function WishBadges({ wish, view, className }: Props) {
|
|
const badges: JSX.Element[] = [];
|
|
|
|
const isNew =
|
|
view === 'owner' ? wish.isNewForOwner === true : wish.isNewForGuest === true;
|
|
if (isNew && wish.status === 'ACTIVE') {
|
|
badges.push(
|
|
<span className="wish-badge wish-badge--new" key="new">
|
|
<Sparkles className="h-3 w-3" aria-hidden />
|
|
new
|
|
</span>,
|
|
);
|
|
}
|
|
if (wish.status === 'COMPLETED') {
|
|
badges.push(
|
|
<span className="wish-badge wish-badge--completed" key="done">
|
|
<Check className="h-3 w-3" aria-hidden />
|
|
fulfilled
|
|
</span>,
|
|
);
|
|
}
|
|
if (wish.status === 'ARCHIVED' && view === 'owner') {
|
|
badges.push(
|
|
<span className="wish-badge wish-badge--archived" key="arch">
|
|
<Archive className="h-3 w-3" aria-hidden />
|
|
archived
|
|
</span>,
|
|
);
|
|
}
|
|
if (wish.status === 'DELETED' && view === 'owner') {
|
|
badges.push(
|
|
<span className="wish-badge wish-badge--deleted" key="del">
|
|
<Trash2 className="h-3 w-3" aria-hidden />
|
|
trash
|
|
</span>,
|
|
);
|
|
}
|
|
|
|
if (badges.length === 0) return null;
|
|
return <div className={cn('flex flex-wrap gap-1.5', className)}>{badges}</div>;
|
|
}
|