You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
1.7 KiB
93 lines
1.7 KiB
import React from 'react'
|
|
|
|
import type { Match } from 'features/Matches'
|
|
import { SportName } from 'features/Common'
|
|
|
|
import { useCard } from '../hooks'
|
|
import { CardFinishedHover } from '../CardFinishedHover'
|
|
import {
|
|
CardWrapper,
|
|
Info,
|
|
MatchDate,
|
|
Preview,
|
|
PreviewWrapper,
|
|
Score,
|
|
Team,
|
|
TeamName,
|
|
Teams,
|
|
Time,
|
|
TournamentName,
|
|
} from '../styled'
|
|
|
|
type CardFinishedProps = {
|
|
match: Match,
|
|
}
|
|
|
|
export const CardFinished = ({
|
|
match: {
|
|
date,
|
|
id,
|
|
preview,
|
|
sportName,
|
|
sportType,
|
|
team1Name,
|
|
team1Score,
|
|
team2Name,
|
|
team2Score,
|
|
time,
|
|
tournamentName,
|
|
},
|
|
}: CardFinishedProps) => {
|
|
const {
|
|
close,
|
|
isOpen,
|
|
onKeyPress,
|
|
open,
|
|
showScore,
|
|
} = useCard()
|
|
|
|
if (isOpen) {
|
|
return (
|
|
<CardFinishedHover
|
|
id={id}
|
|
sportName={sportName}
|
|
onClose={close}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<CardWrapper
|
|
onClick={open}
|
|
onKeyPress={onKeyPress}
|
|
>
|
|
<MatchDate>
|
|
{date}
|
|
<Time>
|
|
{time}
|
|
</Time>
|
|
</MatchDate>
|
|
<PreviewWrapper>
|
|
<Preview
|
|
alt={tournamentName}
|
|
title={tournamentName}
|
|
src={preview}
|
|
/>
|
|
</PreviewWrapper>
|
|
<Info>
|
|
<SportName sport={sportType} />
|
|
<TournamentName title={tournamentName}>{tournamentName}</TournamentName>
|
|
<Teams>
|
|
<Team>
|
|
<TeamName title={team1Name}>{team1Name}</TeamName>
|
|
{showScore && <Score>{team1Score}</Score>}
|
|
</Team>
|
|
<Team>
|
|
<TeamName title={team2Name}>{team2Name}</TeamName>
|
|
{showScore && <Score>{team2Score}</Score>}
|
|
</Team>
|
|
</Teams>
|
|
</Info>
|
|
</CardWrapper>
|
|
)
|
|
}
|
|
|