Public Access
109 lines
4.7 KiB
React
109 lines
4.7 KiB
React
import {Link} from 'react-router-dom';
|
|
import {useTranslation} from 'react-i18next';
|
|
import {Dices, Inbox, Shuffle} from 'lucide-react';
|
|
|
|
import {Button} from '@/components/ui/button';
|
|
import {Card} from '@/components/ui/card';
|
|
import GameCover from './GameCover.jsx';
|
|
import {STATUS_META} from './GameStatusBadge.jsx';
|
|
import {backlogShare, GAME_STATUSES} from '../utils/backlog.js';
|
|
import {formatPlaytime} from '../utils/games.js';
|
|
|
|
export default function PileOfShameCard({summary, syncing, onShuffle, shuffling}) {
|
|
const {t, i18n} = useTranslation();
|
|
const backlog = summary.byStatus?.BACKLOG ?? 0;
|
|
const suggestion = summary.suggestion;
|
|
|
|
if (syncing && summary.total === 0) {
|
|
return (
|
|
<Card className="gap-5 p-5">
|
|
<Title/>
|
|
<p className="py-6 text-center text-sm text-muted-foreground">{t('LIBRARY.SYNCING_FIRST_TIME')}</p>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="gap-5 p-5">
|
|
<Title/>
|
|
|
|
<div>
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-4xl font-bold tabular-nums">{backlog.toLocaleString(i18n.language)}</span>
|
|
<span className="text-sm text-muted-foreground">
|
|
{t('DASHBOARD.PILE_SHARE', {percent: backlogShare(summary)})}
|
|
</span>
|
|
</div>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{t('DASHBOARD.NEVER_PLAYED', {count: summary.neverPlayed})}
|
|
</p>
|
|
{summary.backlogMinutes > 0 && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('DASHBOARD.BACKLOG_HOURS', {time: formatPlaytime(summary.backlogMinutes)})}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{summary.total > 0 && (
|
|
<div className="space-y-2">
|
|
<div className="flex h-2.5 overflow-hidden rounded-full bg-muted">
|
|
{GAME_STATUSES.map((s) => (
|
|
<div
|
|
key={s}
|
|
className={STATUS_META[s].bar}
|
|
style={{width: `${(summary.byStatus[s] / summary.total) * 100}%`}}
|
|
/>
|
|
))}
|
|
</div>
|
|
<ul className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
|
{GAME_STATUSES.map((s) => (
|
|
<li key={s} className="flex items-center gap-1.5">
|
|
<span className={`size-2 rounded-full ${STATUS_META[s].bar}`}/>
|
|
{t(`BACKLOG.STATUS.${s}`)}
|
|
<span className="tabular-nums text-foreground">{summary.byStatus[s]}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{suggestion ? (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">{t('DASHBOARD.SUGGESTION')}</span>
|
|
{backlog > 1 && (
|
|
<Button variant="ghost" size="sm" onClick={onShuffle} disabled={shuffling}>
|
|
<Shuffle/>{t('DASHBOARD.OTHER_SUGGESTION')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Link
|
|
to={`/library/${suggestion.appid}`}
|
|
className="group flex items-center gap-3 rounded-lg border p-2 transition-colors hover:bg-muted/50"
|
|
>
|
|
<GameCover appid={suggestion.appid} imageUrl={suggestion.imageUrl} className="w-24 shrink-0"/>
|
|
<span className="min-w-0 truncate font-medium group-hover:text-primary transition-colors">
|
|
{suggestion.name ?? `App ${suggestion.appid}`}
|
|
</span>
|
|
</Link>
|
|
<Button asChild variant="outline" size="sm" className="w-full">
|
|
<Link to="/play-next"><Dices/>{t('DASHBOARD.OPEN_PICKER')}</Link>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">{t('DASHBOARD.BACKLOG_EMPTY')}</p>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function Title() {
|
|
const {t} = useTranslation();
|
|
return (
|
|
<h2 className="flex items-center gap-2 font-semibold">
|
|
<Inbox className="size-4 text-rose-500"/>
|
|
{t('DASHBOARD.PILE_OF_SHAME')}
|
|
</h2>
|
|
);
|
|
}
|