diff --git a/package.json b/package.json
index 46c90587..bb73c780 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
"ts-jest": "^29.0.3",
"ts-node": "^10.9.1",
"typescript": "^4.9.3",
+ "vercel": "^33.6.2",
"webpack": "^5.76.0",
"webpack-dev-middleware": "^6.0.1",
"webpack-dev-server": "^4.11.0",
diff --git a/src/containers/ListingPage/ListingPage.tsx b/src/containers/ListingPage/ListingPage.tsx
index 1f3ce600..4b8af5ed 100644
--- a/src/containers/ListingPage/ListingPage.tsx
+++ b/src/containers/ListingPage/ListingPage.tsx
@@ -6,14 +6,24 @@
*
*/
import qs from "query-string";
+import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { gql, useQuery } from "@apollo/client";
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
import { Spinner } from "@ndla/icons";
import ListingContainer from "./ListingContainer";
import { GQLListingPageQuery, GQLListingPageQueryVariables } from "../../graphqlTypes";
import { mapTagsToFilters, filterTags } from "../../util/listingHelpers";
import NotFoundPage from "../NotFoundPage/NotFoundPage";
+const AlertBanner = styled.div`
+ text-align: center;
+ background-color: ${colors.support.yellow};
+ padding-block: ${spacing.nsmall};
+ padding-inline: ${spacing.normal};
+`;
+
interface Props {
isOembed: boolean;
}
@@ -27,6 +37,7 @@ const getSubjectsString = (subjects: string | string[] | number | boolean | unde
};
const ListingPage = ({ isOembed }: Props): JSX.Element => {
+ const { t } = useTranslation();
const location = useLocation();
const searchParams = qs.parse(location.search, { arrayFormat: "bracket" });
const querySubjects = getSubjectsString(searchParams["subjects"]);
@@ -49,12 +60,15 @@ const ListingPage = ({ isOembed }: Props): JSX.Element => {
const filteredTags = filterTags(data?.listingPage?.tags ?? previousData?.listingPage?.tags ?? []);
return (
-
+ <>
+ {t("alert")}
+
+ >
);
};
diff --git a/src/phrases/phrases-en.ts b/src/phrases/phrases-en.ts
index 56857951..2be00719 100644
--- a/src/phrases/phrases-en.ts
+++ b/src/phrases/phrases-en.ts
@@ -14,6 +14,7 @@ const phrases = {
toolTheme: "Tools",
natureTheme: "Nature",
},
+ alert: "This page will be discontinued in February 2025.",
};
export default phrases;
diff --git a/src/phrases/phrases-nb.ts b/src/phrases/phrases-nb.ts
index a6fa9359..b41bb25c 100644
--- a/src/phrases/phrases-nb.ts
+++ b/src/phrases/phrases-nb.ts
@@ -14,6 +14,7 @@ const phrases = {
toolTheme: "Verktøy",
natureTheme: "Naturbruk",
},
+ alert: "Denne siden vil bli avviklet i løpet av februar 2025.",
};
export default phrases;
diff --git a/src/phrases/phrases-nn.ts b/src/phrases/phrases-nn.ts
index ccddc973..4e349cc5 100644
--- a/src/phrases/phrases-nn.ts
+++ b/src/phrases/phrases-nn.ts
@@ -14,6 +14,7 @@ const phrases = {
toolTheme: "Verktøy",
natureTheme: "Naturbruk",
},
+ alert: "Denne sida vil bli avvikla i løpet av februar 2025.",
};
export default phrases;
diff --git a/yarn.lock b/yarn.lock
index b6503a0a..10f5695e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12078,6 +12078,7 @@ __metadata:
ts-jest: "npm:^29.0.3"
ts-node: "npm:^10.9.1"
typescript: "npm:^4.9.3"
+ vercel: "npm:^33.6.2"
webpack: "npm:^5.76.0"
webpack-dev-middleware: "npm:^6.0.1"
webpack-dev-server: "npm:^4.11.0"