Add Football Matches

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<typeof FootballLiveMatchesComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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;

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) => (
+			<Fragment key={day.date.toISOString()}>
+				<h2>{day.date.toString()}</h2>
+				{day.competitions.map((competition) => (
+					<Fragment key={competition.competitionId}>
+						<h3>{competition.name}</h3>
+						<ul>
+							{competition.matches.map((match) => (
+								<li key={match.paId}>
+									<time
+										dateTime={match.dateTime.toISOString()}
+									>
+										{match.dateTime.getUTCHours()}:
+										{match.dateTime.getUTCMinutes()}
+									</time>
+									{match.homeTeam.name} {match.homeTeam.score}
+									-{match.awayTeam.score}{' '}
+									{match.awayTeam.name}
+								</li>
+							))}
+						</ul>
+					</Fragment>
+				))}
+			</Fragment>
+		))}
+	</>
+);

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[];
+}>;