diff --git a/dotcom-rendering/src/components/FootballLiveMatches.stories.tsx b/dotcom-rendering/src/components/FootballLiveMatches.stories.tsx new file mode 100644 index 00000000000..d17078c0bed --- /dev/null +++ b/dotcom-rendering/src/components/FootballLiveMatches.stories.tsx @@ -0,0 +1,78 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators'; +import { FootballLiveMatches as FootballLiveMatchesComponent } from './FootballLiveMatches'; + +const meta = { + title: 'Components/Football Live Matches', + component: FootballLiveMatchesComponent, + decorators: [centreColumnDecorator], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const FootballLiveMatches = { + args: { + matches: [ + { + date: new Date('2025-01-24T00:00:00Z'), + competitions: [ + { + competitionId: '635', + name: 'Serie A', + nation: 'European', + matches: [ + { + dateTime: new Date('2025-01-24T19:45:00Z'), + paId: '4482093', + homeTeam: { + name: 'Torino', + score: 1, + }, + awayTeam: { + name: 'Cagliari', + score: 0, + }, + status: 'FT', + }, + { + dateTime: new Date('2025-01-24T19:45:00Z'), + paId: '4482890', + homeTeam: { + name: 'Auxerre', + score: 0, + }, + awayTeam: { + name: 'St Etienne', + score: 0, + }, + status: 'FT', + }, + ], + }, + { + competitionId: '650', + name: 'La Liga', + nation: 'European', + matches: [ + { + dateTime: new Date('2025-01-24T20:00:00Z'), + paId: '4482835', + homeTeam: { + name: 'Las Palmas', + score: 2, + }, + awayTeam: { + name: 'Osasuna', + score: 3, + }, + status: 'FT', + }, + ], + }, + ], + }, + ], + }, +} satisfies Story; diff --git a/dotcom-rendering/src/components/FootballLiveMatches.tsx b/dotcom-rendering/src/components/FootballLiveMatches.tsx new file mode 100644 index 00000000000..e04f1003201 --- /dev/null +++ b/dotcom-rendering/src/components/FootballLiveMatches.tsx @@ -0,0 +1,36 @@ +import { Fragment } from 'react'; +import type { FootballMatches } from '../footballMatches'; + +type Props = { + matches: FootballMatches; +}; + +export const FootballLiveMatches = ({ matches }: Props) => ( + <> + {matches.map((day) => ( + +

{day.date.toString()}

+ {day.competitions.map((competition) => ( + +

{competition.name}

+
    + {competition.matches.map((match) => ( +
  • + + {match.homeTeam.name} {match.homeTeam.score} + -{match.awayTeam.score}{' '} + {match.awayTeam.name} +
  • + ))} +
+
+ ))} +
+ ))} + +); diff --git a/dotcom-rendering/src/footballMatches.ts b/dotcom-rendering/src/footballMatches.ts new file mode 100644 index 00000000000..4358010b2cf --- /dev/null +++ b/dotcom-rendering/src/footballMatches.ts @@ -0,0 +1,37 @@ +type TeamScore = { + name: string; + score: number; +}; + +type MatchData = { + paId: string; + dateTime: Date; +}; + +export type MatchResult = MatchData & { + homeTeam: TeamScore; + awayTeam: TeamScore; +}; + +export type MatchFixture = MatchData & { + homeTeam: string; + awayTeam: string; +}; + +export type LiveMatch = MatchData & { + homeTeam: TeamScore; + awayTeam: TeamScore; + status: string; +}; + +type Competition = { + competitionId: string; + name: string; + nation: string; + matches: LiveMatch[]; +}; + +export type FootballMatches = Array<{ + date: Date; + competitions: Competition[]; +}>;