Files
cluedo-hp-webapp/frontend/src/components/WinnerBadge.jsx
nessi b4b5c7903a Remove redundant email display logic in WinnerBadge component.
Simplified the WinnerBadge component by removing the conditional logic for optionally displaying the email when the display name is available. Updated WinnerCard to use display name as the primary label fallback for members, ensuring cleaner and consistent rendering.
2026-02-06 13:46:02 +01:00

48 lines
1.3 KiB
JavaScript

import React from "react";
import { stylesTokens } from "../styles/theme";
/**
* Props:
* - winner: { display_name?: string, email?: string } | null
* - winnerEmail: string | null (legacy fallback)
*/
export default function WinnerBadge({ winner, winnerEmail }) {
const name =
(winner?.display_name || "").trim() ||
(winner?.email || "").trim() ||
(winnerEmail || "").trim();
if (!name) return null;
return (
<div
style={{
marginTop: 14,
padding: "10px 12px",
borderRadius: 16,
border: `1px solid ${stylesTokens.panelBorder}`,
background: stylesTokens.panelBg,
boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
backdropFilter: "blur(6px)",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 10,
}}
>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{ fontSize: 18 }}>🏆</div>
<div style={{ color: stylesTokens.textMain, fontWeight: 900 }}>
Sieger:
<span style={{ color: stylesTokens.textGold }}>{" "}{name}</span>
</div>
</div>
<div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
festgelegt
</div>
</div>
);
}