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"