fix: use next race image as dashboard hero background

frontend/src/pages/DashboardPage.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import type { Race } from "../api";
@@ -7,6 +8,7 @@ import {
   formatDistance,
   formatRaceDate,
   getRaceCountdownLabel,
+  getRaceVisual,
   getPaceLabel,
   isCloseDistance,
   parseFinishTimeToSeconds,
@@ -16,6 +18,10 @@ import {
 
 const PR_DISTANCES = [5, 10, 21.1, 42.2] as const;
 
+type DashboardHeroStyle = CSSProperties & {
+  "--dashboard-hero-image"?: string;
+};
+
 function getErrorMessage(error: unknown): string {
   if (error instanceof ApiError) {
     return error.message;
@@ -23,6 +29,10 @@ function getErrorMessage(error: unknown): string {
   return "Не удалось загрузить данные обзора.";
 }
 
+function toCssUrl(value: string): string {
+  return `url(${JSON.stringify(value)})`;
+}
+
 export function DashboardPage(): JSX.Element {
   const [races, setRaces] = useState<Race[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -136,6 +146,10 @@ export function DashboardPage(): JSX.Element {
     dashboardMetrics.seasonTotal > 0
       ? Math.round((dashboardMetrics.seasonCompletedCount / dashboardMetrics.seasonTotal) * 100)
       : 0;
+  const dashboardHeroVisual = dashboardMetrics.nextRace ? getRaceVisual(dashboardMetrics.nextRace) : null;
+  const dashboardHeroStyle: DashboardHeroStyle | undefined = dashboardHeroVisual
+    ? { "--dashboard-hero-image": toCssUrl(dashboardHeroVisual.imageSrc) }
+    : undefined;
 
   if (isLoading) {
     return (
@@ -157,7 +171,11 @@ export function DashboardPage(): JSX.Element {
 
   return (
     <section className="page page--dashboard">
-      <section className="dashboard-hero" aria-label="Обзор сезона">
+      <section
+        className={`dashboard-hero${dashboardHeroVisual ? " dashboard-hero--with-image" : ""}`}
+        style={dashboardHeroStyle}
+        aria-label="Обзор сезона"
+      >
         <div className="dashboard-hero__content">
           <p className="dashboard-hero__eyebrow">Календарь сезона</p>
           <h1 className="dashboard-hero__title">Беговой штаб</h1>