diff --git a/components/AnnouncementBanner/AnnouncementBanner.tsx b/components/AnnouncementBanner/AnnouncementBanner.tsx new file mode 100644 index 000000000..6e678c1c2 --- /dev/null +++ b/components/AnnouncementBanner/AnnouncementBanner.tsx @@ -0,0 +1,45 @@ +import { Row } from "react-bootstrap" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faXmark } from "@fortawesome/free-solid-svg-icons" +import { useLocalStorage } from "usehooks-ts" + +function AnnouncementBanner({ + endDate, + children +}: { + endDate: Date + children: React.ReactElement +}) { + const [open, setOpen] = useLocalStorage("bannerOpen", true) + + const close = () => { + setOpen(false) + } + + const now: Date = new Date() + if (now < endDate && open) { + return ( + + + + {children} + + ) + } else { + return <> + } +} + +export default AnnouncementBanner diff --git a/components/AnnouncementBanner/TranscriptAnnouncement.tsx b/components/AnnouncementBanner/TranscriptAnnouncement.tsx new file mode 100644 index 000000000..8970bbfb5 --- /dev/null +++ b/components/AnnouncementBanner/TranscriptAnnouncement.tsx @@ -0,0 +1,23 @@ +import { useTranslation } from "react-i18next" +import AnnouncementBanner from "./AnnouncementBanner" + +function TranscriptAnnouncement() { + const { t } = useTranslation("common") + return ( + +

+ {t("announcement.headingBold")}{" "} + + {t("announcement.headingBody")} +
+ {t("announcement.description")}{" "} + + {t("announcement.link")} + +
+

+
+ ) +} + +export default TranscriptAnnouncement diff --git a/components/HeroHeader/HeroHeader.js b/components/HeroHeader/HeroHeader.js index 28177b858..924cdf917 100644 --- a/components/HeroHeader/HeroHeader.js +++ b/components/HeroHeader/HeroHeader.js @@ -7,11 +7,13 @@ import styles from "./HeroHeader.module.css" import { useTranslation } from "next-i18next" import { capitalize } from "lodash" import { NEWSLETTER_SIGNUP_URL, TRAINING_CALENDAR_URL } from "../common" +import TranscriptAnnouncement from "components/AnnouncementBanner/TranscriptAnnouncement" const HeroHeader = ({ authenticated }) => { const { t } = useTranslation("common") return ( + + +export const Primary: Story = { + args: { + endDate: new Date("2026-03-01T12:00:00.000Z") + }, + name: "AnnouncementBanner" +}