information banner from api with date range

2022-09-22 11:12:04 +01:00
parent f9cdaafd7c
commit 38e70b1ec1
17 changed files with 548 additions and 119 deletions
@@ -0,0 +1,65 @@
+import Link from "next/link";
+import Image from "next/image";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import cookie from "cookie-cutter";
+
+export default function NoticeBanner(props) {
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+
+    const [bannerOpen, setBannerOpen] = useState(true);
+
+    const { noticeContent } = props;
+    const hideNotice = () => {
+        let now = new Date();
+        let expDate = new Date(now);
+
+        expDate.setDate(now.getDate() + 365);
+        cookie.set("pedwNotice", "true", {
+            expires: expDate,
+            path: "/",
+        });
+
+        setBannerOpen(false);
+    };
+
+    const bannerOpenCookie = typeof cookie.get("pedwNotice") == "undefined";
+
+    return (
+        <>
+            {bannerOpenCookie ? (
+                <div className="govuk-warning-text noticebanner">
+                    <span
+                        className="govuk-warning-text__icon"
+                        aria-hidden="true"
+                    >
+                        !
+                    </span>
+                    <strong className="govuk-warning-text__text">
+                        <span className="govuk-warning-text__assistive">
+                            Warning
+                        </span>
+                        {router.locale != "en"
+                            ? noticeContent.value[0].notice_cy
+                            : noticeContent.value[0].notice_en}
+                    </strong>
+                    <div className="hideNotice">
+                        <span
+                            className="govuk-link"
+                            onClick={() => {
+                                hideNotice();
+                            }}
+                        >
+                            Hide
+                        </span>
+                    </div>
+                </div>
+            ) : (
+                ""
+            )}
+        </>
+    );
+}