diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 9d67201..9b88322 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,6 +1,11 @@ { "Lue lisää": "Read more", - "lngButton": "Suomeksi", "Hakemaasi sivua": + "lngButton": "Suomeksi", + "Paikka": "Location", + "Alkaa": "Starts at", + "Päättyy": "Ends at", + + "Hakemaasi sivua": "Page", "ei löydy": diff --git a/src/components/ChangeLanguageButton.tsx b/src/components/ChangeLanguageButton.tsx index 6aebe31..1e5682e 100644 --- a/src/components/ChangeLanguageButton.tsx +++ b/src/components/ChangeLanguageButton.tsx @@ -1,14 +1,20 @@ import React from "react"; -import i18nNext, { useTranslation } from "../i18n"; - -const ChangeLanguageButton: React.FC = () => { - const { t } = useTranslation(); - - const { i18n } = i18nNext; +import styled from "styled-components"; +import i18nNext from "../i18n"; +import Icon, { IconType } from "./Icon"; +const ChangeLanguageButton: React.FC = (props) => { + const { language, changeLanguage } = i18nNext.i18n; return ( - + ); }; -export default ChangeLanguageButton; +export default styled(ChangeLanguageButton)` + font-size: 4rem; + background: none; + border: none; + width: fit-content; +`; diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 1efc431..8290aea 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -69,10 +69,18 @@ const nameToIcon = (name: IconType): JSX.Element | string => { ); } if (name === IconType.FinlandFlag) { - return "🇫🇮"; + return ( + + 🇫🇮 + + ); } if (name === IconType.GBFlag) { - return "🇬🇧"; + return ( + + 🇬🇧 + + ); } return null; }; diff --git a/src/components/index.tsx b/src/components/index.tsx index c9c36fb..3ca5862 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -10,3 +10,4 @@ export { default as InfoBox } from "./InfoBox"; export { default as Accordion } from "./Accordion/Accordion"; export { default as Link } from "./Link"; export { default as CrossFadeImages } from "./CrossFadeImages"; +export { default as ChangeLanguageButton } from "./ChangeLanguageButton"; diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx index 2977731..100ec71 100644 --- a/src/views/EventPage/EventPageView.tsx +++ b/src/views/EventPage/EventPageView.tsx @@ -4,12 +4,11 @@ import styled from "styled-components"; import colors from "@theme/colors"; import Event from "@models/Event"; import Button from "@components/Button"; -import { Link, TextSection } from "@components/index"; +import { Link, TextSection, ChangeLanguageButton } from "@components/index"; import noop from "@utils/noop"; - import MarkdownStyles from "@views/common/MarkdownStyles"; import LoadingView from "@views/common/LoadingView"; -// import ChangeLanguageButton from "@components/ChangeLanguageButton"; +import i18nNext, { useTranslation } from "../../i18n"; interface EventPageViewProps { event?: Event; @@ -34,7 +33,6 @@ const StyledTextSection = styled(TextSection)` line-height: 0.4rem; } } - `; const SignupButtons = styled.div` @@ -47,49 +45,69 @@ const Content = styled(MarkdownStyles)` margin-top: 1.5rem; `; +const LngButton = styled(ChangeLanguageButton)` + align-self: flex-end; + margin-right: 1rem; +`; + const EventPageView: React.FC = ({ event }) => { + const { t } = useTranslation(); if (!event) return ; - const date_start = new Date(event.start_time).toLocaleString("fi-FI"); - const date_end = new Date(event.end_time).toLocaleString("fi-FI"); + const { language } = i18nNext.i18n; + const isFi = language === "fi"; + const { + title, description, content, location, startDate, endDate, + } = { + title: isFi ? event.title_fi : event.title_en, + description: isFi ? event.description_fi : event.description_en, + content: isFi ? event.content_fi : event.content_en, + location: isFi ? event.location_fi : event.location_en, + startDate: new Date(event.start_time).toLocaleString(isFi ? "fi-FI" : "en-GB"), + endDate: new Date(event.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB"), + }; + return ( - -

- {event.title_fi} -

- {event.description_fi} -

- {event.title_fi} -

-
- -

- Paikka: {event.location_fi} -

-

- -

-

- -

- {/* We may have multiple signup forms. Generate own Button for each one */} - - {event.signupForm.map((sf) => ( - - - - ))} - -
-
+ <> + + +

+ {title} +

+ {description} +

+ {title} +

+
+ +

+ {`${t("Paikka")}: ${location}`} +

+

+ +

+

+ +

+ {/* We may have multiple signup forms. Generate own Button for each one */} + + {event.signupForm.map((sf) => ( + + + + ))} + +
+
+ ); }; export default EventPageView;