Skip to content

Commit f76d1ea

Browse files
O2saO2sa
committed
feat(comparison): enhance winner card with avatar, trophy badge, and responsive layout
- Replace rigid flex row with responsive column/row layout - Add winner avatar with floating gold trophy badge - Add compact lead metric pill for small screens and prominent stat block on desktop - Add handle badge and responsive typography to prevent overflow
1 parent 907e039 commit f76d1ea

1 file changed

Lines changed: 64 additions & 18 deletions

File tree

‎src/features/comparison/components/result-dashboard.tsx‎

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -366,47 +366,93 @@ export function ResultDashboard({
366366
return (
367367
<div className="animate-fadeIn space-y-6">
368368
<Card className="border-2 border-primary/20 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent">
369-
<CardContent className="p-6">
370-
<div className="flex items-center justify-between">
369+
<CardContent className="p-4 sm:p-6">
370+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
371371
{overallWinnerUser ? (
372372
<>
373-
<div className="flex items-center gap-4">
374-
<div className="rounded-full bg-primary/20 p-3">
375-
<Trophy className="h-8 w-8 text-primary" />
373+
<div className="flex min-w-0 items-center gap-3 sm:gap-4">
374+
{/* Winner Avatar with Corner Trophy Badge */}
375+
<div className="relative shrink-0">
376+
<Link
377+
href={`/user/${overallWinnerUser.username}` as Route}
378+
className="group block"
379+
aria-label={t("a11y.openProfile", {
380+
name: getDisplayName(overallWinnerUser),
381+
})}
382+
>
383+
<Avatar
384+
src={overallWinnerUser.avatarUrl}
385+
alt={t("comparison.avatarAlt", {
386+
name: getDisplayName(overallWinnerUser),
387+
})}
388+
size={56}
389+
className="h-12 w-12 object-cover ring-2 ring-primary/30 transition-transform duration-200 group-hover:scale-105 sm:h-14 sm:w-14"
390+
/>
391+
</Link>
392+
<div
393+
className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm ring-2 ring-background dark:bg-amber-400 dark:text-zinc-950"
394+
title={t("banner.winner")}
395+
>
396+
<Trophy className="h-3.5 w-3.5 fill-current" />
397+
</div>
376398
</div>
377-
<div>
378-
<p className="text-sm text-muted-foreground">{t("banner.winner")}</p>
379-
<div className="flex items-center gap-2">
399+
400+
<div className="min-w-0 flex-1 space-y-1">
401+
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground sm:text-sm">
402+
{t("banner.winner")}
403+
</p>
404+
<div className="flex flex-wrap items-center gap-2">
380405
<Link
381406
href={`/user/${overallWinnerUser.username}` as Route}
382-
className="text-3xl font-bold text-primary hover:underline"
407+
className="truncate text-xl font-bold text-foreground transition-colors hover:text-primary hover:underline sm:text-2xl md:text-3xl"
383408
>
384409
{getDisplayName(overallWinnerUser)}
385410
</Link>
386411
<a
387412
href={getGithubProfileUrl(overallWinnerUser.username)}
388413
target="_blank"
389414
rel="noopener noreferrer"
390-
className="inline-flex items-center text-muted-foreground transition-colors hover:text-foreground"
415+
className="inline-flex shrink-0 items-center text-muted-foreground transition-colors hover:text-foreground"
391416
aria-label={t("a11y.openProfile", {
392417
name: getDisplayName(overallWinnerUser),
393418
})}
394419
>
395-
<ExternalLink className="h-5 w-5" />
420+
<ExternalLink className="h-4 w-4" />
396421
</a>
422+
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
423+
@{overallWinnerUser.username}
424+
</span>
425+
</div>
426+
427+
{/* Compact Lead Pill on Mobile */}
428+
<div className="pt-0.5 sm:hidden">
429+
<span className="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
430+
<span className="text-muted-foreground">{t("banner.leadby")}:</span>
431+
<span>{winnerLeadValue}</span>
432+
</span>
397433
</div>
398434
</div>
399435
</div>
400-
<div className="text-right">
401-
<p className="text-sm text-muted-foreground">{t("banner.leadby")}</p>
402-
<p className="text-2xl font-bold text-primary">{winnerLeadValue}</p>
436+
437+
{/* Bold Stat Block on Desktop */}
438+
<div className="hidden shrink-0 text-right sm:block">
439+
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground sm:text-sm">
440+
{t("banner.leadby")}
441+
</p>
442+
<p className="text-2xl font-bold text-primary md:text-3xl">{winnerLeadValue}</p>
403443
</div>
404444
</>
405445
) : (
406-
<>
407-
<p className="text-sm text-muted-foreground">{t("banner.metric")}</p>
408-
<h2 className="text-xl font-semibold">{t("banner.tie")}</h2>
409-
</>
446+
<div className="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
447+
<div>
448+
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground sm:text-sm">
449+
{t("banner.metric")}
450+
</p>
451+
<h2 className="text-xl font-bold text-foreground sm:text-2xl">
452+
{t("banner.tie")}
453+
</h2>
454+
</div>
455+
</div>
410456
)}
411457
</div>
412458
{scoreVersion ? (

0 commit comments

Comments
 (0)