Tommi S
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import {
|
||
Card,
|
||
PageLink,
|
||
CardSection,
|
||
} from "@components/index";
|
||
import Event from "@models/Event";
|
||
import noop from "@utils/noop";
|
||
import { Lang, getTranslateFunc } from "../../i18n";
|
||
|
||
const cardTimeOpts: Intl.DateTimeFormatOptions = {
|
||
day: "numeric",
|
||
month: "numeric",
|
||
year: "numeric",
|
||
hour: "numeric",
|
||
minute: "2-digit",
|
||
};
|
||
|
||
type EventsProps = {
|
||
events: Event[];
|
||
lang: Lang
|
||
};
|
||
|
||
const Events: React.FC<EventsProps> = ({ events, lang }) => {
|
||
const isFi = lang === "fi";
|
||
const t = getTranslateFunc(lang);
|
||
|
||
const buttonText = `${t("Lue lisää")}\xa0›`;
|
||
const pageLinkText = t("Kaikki tapahtumat");
|
||
const pageLinkDesc = `${t("löydät tapahtumakalenterista")}\xa0›`;
|
||
|
||
const googleCalendarText = t("Lisää killan");
|
||
const googleCalendarDesc = `${t("Google-kalenteri")}\xa0›`;
|
||
|
||
const locale = isFi ? "fi-FI" : "en-GB";
|
||
|
||
const filteredEvents = events.map((e) => ({
|
||
...e,
|
||
title: isFi ? e.title_fi : e.title_en,
|
||
description: isFi ? e.description_fi : e.description_en,
|
||
content: isFi ? e.content_fi : e.content_en,
|
||
location: isFi ? e.location_fi : e.location_en,
|
||
startDate: new Date(e.start_time).toLocaleString(locale, cardTimeOpts),
|
||
endDate: new Date(e.end_time).toLocaleString(locale, cardTimeOpts),
|
||
}));
|
||
|
||
return (
|
||
<CardSection id="#events">
|
||
{filteredEvents.map((event) => (
|
||
<Card
|
||
key={event.id}
|
||
title={event.title}
|
||
startTime={new Date(event.start_time).toLocaleString(locale, cardTimeOpts)}
|
||
text={event.description}
|
||
link={`/events/${event.id}`}
|
||
image={{
|
||
src: event.image || event.tags[0].icon,
|
||
alt: event.title,
|
||
}}
|
||
buttonOnClick={noop}
|
||
buttonText={buttonText}
|
||
data-e2e="event-card"
|
||
/>
|
||
))}
|
||
<aside>
|
||
<PageLink to="/kilta/toiminta#tapahtumat" desc={pageLinkDesc}>
|
||
{pageLinkText}
|
||
</PageLink>
|
||
<PageLink to="https://calendar.google.com/calendar/u/0?cid=Y19mYjhhNWUwMjVjMjhkMTg5YTkzMWYyN2U5N2M4ODBmMGFhNTdmN2M1NDFlYzVhNjdlZDM4NzliYTVhNDEwNWI1QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20" desc={googleCalendarDesc}>
|
||
{googleCalendarText}
|
||
</PageLink>
|
||
</aside>
|
||
|
||
</CardSection>
|
||
);
|
||
};
|
||
|
||
export default Events;
|