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.
48 lines
1.3 KiB
JavaScript
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>
|
|
);
|
|
}
|