Tom Boullay
c75c4e0be6
Replace the border swap with an outer green outline so the white border stays in place. Selected = white border + green outline, unselected = white border only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import type { SiteCardConfig } from "@/data/site/siteConfig";
|
|
|
|
interface SiteCardProps {
|
|
config: SiteCardConfig;
|
|
selected: boolean;
|
|
onSelect: () => void;
|
|
variant?: "default" | "situation";
|
|
}
|
|
|
|
export function SiteCard({
|
|
config,
|
|
selected,
|
|
onSelect,
|
|
variant = "default",
|
|
}: SiteCardProps): React.JSX.Element {
|
|
const { label, imagePath, disabled } = config;
|
|
const isSituation = variant === "situation";
|
|
|
|
const getBackground = (): string => {
|
|
if (imagePath) return `url(${imagePath}) center/cover`;
|
|
if (disabled) return "rgba(255, 255, 255, 0.42)";
|
|
return "#b8b8b8";
|
|
};
|
|
|
|
const textColor = disabled ? "rgba(77, 77, 77, 0.72)" : "#4d4d4d";
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onSelect}
|
|
disabled={disabled}
|
|
aria-pressed={selected}
|
|
aria-label={label}
|
|
className="site-card-button"
|
|
style={{
|
|
width: isSituation
|
|
? "clamp(220px, 24vw, 300px)"
|
|
: "clamp(120px, 15vw, 160px)",
|
|
height: isSituation
|
|
? "clamp(48px, 6vw, 60px)"
|
|
: "clamp(140px, 18vw, 180px)",
|
|
border: "3px solid rgba(255, 255, 255, 0.55)",
|
|
outline: selected ? "3px solid #a8d5a2" : "none",
|
|
outlineOffset: 0,
|
|
background: getBackground(),
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
transition: "all 0.15s ease",
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{!imagePath && (
|
|
<span
|
|
style={{
|
|
color: textColor,
|
|
fontSize: isSituation
|
|
? "clamp(14px, 1.8vw, 22px)"
|
|
: "clamp(10px, 1.5vw, 14px)",
|
|
fontWeight: isSituation ? 700 : 500,
|
|
textAlign: "center",
|
|
padding: 8,
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|