Public Access
lobo
c24c22d5ed
Pile of Shame shows the backlog count and share, a status bar and a random backlog pick. Both tiles show the first-sync text while the initial sync runs; a failed summary load shows a retry button.
31 lines
1.5 KiB
React
31 lines
1.5 KiB
React
import {useTranslation} from 'react-i18next';
|
|
import {Ban, CircleCheck, Gamepad2, Inbox, Trophy} from 'lucide-react';
|
|
|
|
import {Badge} from '@/components/ui/badge';
|
|
import {cn} from '@/lib/utils';
|
|
|
|
export const STATUS_META = {
|
|
BACKLOG: {icon: Inbox, text: 'text-muted-foreground', badge: 'bg-secondary text-secondary-foreground', bar: 'bg-zinc-400 dark:bg-zinc-500'},
|
|
PLAYING: {icon: Gamepad2, text: 'text-primary', badge: 'bg-primary/15 text-primary', bar: 'bg-primary'},
|
|
FINISHED: {icon: CircleCheck, text: 'text-emerald-600 dark:text-emerald-400', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400', bar: 'bg-emerald-500'},
|
|
COMPLETED: {icon: Trophy, text: 'text-amber-600 dark:text-amber-400', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400', bar: 'bg-amber-500'},
|
|
DROPPED: {icon: Ban, text: 'text-rose-600 dark:text-rose-400', badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400', bar: 'bg-rose-500'},
|
|
};
|
|
|
|
/**
|
|
* @param compact shows only the icon below the sm breakpoint
|
|
*/
|
|
export default function GameStatusBadge({status, compact = false, className}) {
|
|
const {t} = useTranslation();
|
|
const meta = STATUS_META[status];
|
|
if (!meta) return null;
|
|
const Icon = meta.icon;
|
|
const label = t(`BACKLOG.STATUS.${status}`);
|
|
return (
|
|
<Badge className={cn(meta.badge, className)} title={label}>
|
|
<Icon/>
|
|
<span className={compact ? 'hidden sm:inline' : undefined}>{label}</span>
|
|
</Badge>
|
|
);
|
|
}
|