diff --git a/src/components/Card.tsx b/src/components/Card.tsx index a23c86c..4d90970 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -10,8 +10,10 @@ interface WrappedCardProps { start_time: string; text: string; link: string; - image?: string; - imageAlt?: string; + image?: { + src: string; + alt: string; + }; buttonOnClick?: () => void; } @@ -67,7 +69,7 @@ const StyledCard = styled.article` `; const WrappedCard: React.FC = ({ - title, text, link, image, imageAlt, start_time, buttonOnClick, ...props + title, text, link, image, start_time, buttonOnClick, ...props }) => { const options: Intl.DateTimeFormatOptions = { day: "numeric", @@ -77,9 +79,6 @@ const WrappedCard: React.FC = ({ minute: "2-digit", }; const datetime = new Date(start_time).toLocaleString("fi-FI", options); - const img = image ? ( - {imageAlt} - ) : null; const button = ( @@ -91,7 +90,9 @@ const WrappedCard: React.FC = ({ return ( - {img} + {image && ( + {image.alt} + )}

{datetime}

{title}

{text}

diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index 87444f8..400e968 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -75,7 +75,10 @@ const FrontPageView: React.FC = ({ events, feed }) => ( start_time={event.start_time} text={event.description_fi} link={`/events/${event.id}`} - image={event.image || event.tags[0].icon} + image={{ + src: event.image || event.tags[0].icon, + alt: event.title_fi, + }} buttonOnClick={noop} data-e2e="event-card" /> diff --git a/src/views/InEnglishPage/InEnglishPageView.tsx b/src/views/InEnglishPage/InEnglishPageView.tsx index 3fc4d5f..0d894bb 100644 --- a/src/views/InEnglishPage/InEnglishPageView.tsx +++ b/src/views/InEnglishPage/InEnglishPageView.tsx @@ -201,7 +201,10 @@ const InEnglishPageView: React.FC = ({ events, feed }) = start_time={event.start_time} text={event.description_en} link={`/events/${event.id}`} - image={event.image || event.tags[0].icon} + image={{ + src: event.image || event.tags[0].icon, + alt: event.title_en, + }} buttonOnClick={noop} data-e2e="event-card" />