From b4efe97e528aeb35dbb1e93df0b54c1e48c7575f Mon Sep 17 00:00:00 2001 From: Andre Coullard Date: Mon, 16 Mar 2026 23:28:03 -0400 Subject: [PATCH 1/9] get basic page and translations --- components/InTheNews/InTheNews.tsx | 116 +++++++++++++++++++++++++++++ components/Navbar.tsx | 13 ++-- components/NavbarComponents.tsx | 21 ++++++ pages/about/in-the-news.tsx | 17 +++++ public/locales/en/common.json | 2 + public/locales/en/inTheNews.json | 12 +++ 6 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 components/InTheNews/InTheNews.tsx create mode 100644 pages/about/in-the-news.tsx create mode 100644 public/locales/en/inTheNews.json diff --git a/components/InTheNews/InTheNews.tsx b/components/InTheNews/InTheNews.tsx new file mode 100644 index 000000000..8e262dd70 --- /dev/null +++ b/components/InTheNews/InTheNews.tsx @@ -0,0 +1,116 @@ +import { useState } from "react" +import { Col, Row, Container } from "../bootstrap" +import Tab from "react-bootstrap/Tab" +import Nav from "react-bootstrap/Nav" +import Dropdown from "react-bootstrap/Dropdown" +import { useMediaQuery } from "usehooks-ts" +import { useTranslation } from "next-i18next" + +export const InTheNews = () => { + const isMobile = useMediaQuery("(max-width: 768px)") + return ( + + + {isMobile ? : } + + + + +
+

Media

+
+ + +
+

Awards

+
+ + +
+

Books

+
+ + + + + + + ) +} + +const TabGroup = () => { + const { t } = useTranslation("inTheNews") + return ( + + + + + + + + + + + + ) +} + +const TabDropdown = () => { + const { t } = useTranslation("inTheNews") + const [selectedTab, setSelectedTab] = useState("Media") + + const handleTabClick = (tabTitle: string) => { + setSelectedTab(tabTitle) + } + + return ( + + + + + {selectedTab} + + + handleTabClick("Media")} + > + {t("media.title")} + + + handleTabClick("Awards")} + > + {t("awards.title")} + + + handleTabClick("Books")} + > + {t("books.title")} + + + + + + ) +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 029bcc35f..6e5a311c0 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -16,6 +16,7 @@ import { NavbarLinkEffective, NavbarLinkFAQ, NavbarLinkGoals, + NavbarLinkInTheNews, NavbarLinkLogo, NavbarLinkNewsfeed, NavbarLinkProcess, @@ -87,11 +88,12 @@ const MobileNav: React.FC> = () => { {authenticated ? : <>} - - - - - + + + + + + @@ -228,6 +230,7 @@ const DesktopNav: React.FC> = () => { + diff --git a/components/NavbarComponents.tsx b/components/NavbarComponents.tsx index 458c56cb6..4395c134e 100644 --- a/components/NavbarComponents.tsx +++ b/components/NavbarComponents.tsx @@ -378,3 +378,24 @@ export const NavbarLinkWhyUse: React.FC< ) } + +export const NavbarLinkInTheNews: React.FC< + React.PropsWithChildren<{ + handleClick?: any + other?: any + }> +> = ({ handleClick, other }) => { + const isMobile = useMediaQuery("(max-width: 768px)") + const { t } = useTranslation(["common", "auth"]) + return ( + + + {t("navigation.inTheNews")} + + + ) +} diff --git a/pages/about/in-the-news.tsx b/pages/about/in-the-news.tsx new file mode 100644 index 000000000..1eff2c707 --- /dev/null +++ b/pages/about/in-the-news.tsx @@ -0,0 +1,17 @@ +import { createPage } from "../../components/page" +import { InTheNews } from "../../components/InTheNews/InTheNews" +import { createGetStaticTranslationProps } from "components/translations" + +export default createPage({ + titleI18nKey: "titles.in_the_news", + Page: () => { + return + } +}) + +export const getStaticProps = createGetStaticTranslationProps([ + "auth", + "common", + "footer", + "inTheNews" +]) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a0a3d5fe2..8c6b7daf7 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -128,6 +128,7 @@ "aboutTestimony": "About Testimony", "viewProfile": "View Profile", "whyUseMaple": "Why Use MAPLE", + "inTheNews": "In The News", "login": "Login" }, "new_feature": "*NEW*", @@ -180,6 +181,7 @@ "legislative_process": "How To Have Impact Through Legislative Testimony", "submit_testimony": "Submit Testimony", "support_maple": "How to Support MAPLE", + "in_the_news": "In The News", "testimony": "Testimony", "policies": "Policies", "unsubscribe": "Unsubscribe", diff --git a/public/locales/en/inTheNews.json b/public/locales/en/inTheNews.json new file mode 100644 index 000000000..30f7a8fcc --- /dev/null +++ b/public/locales/en/inTheNews.json @@ -0,0 +1,12 @@ +{ + "title": "Media, Articles & Insights", + "media": { + "title": "Media" + }, + "awards": { + "title": "Awards" + }, + "books": { + "title": "Books" + } +} From 5215bd6d6b41ac859db2e965abcf70a1b61fb3a3 Mon Sep 17 00:00:00 2001 From: Andre Coullard Date: Tue, 17 Mar 2026 00:10:29 -0400 Subject: [PATCH 2/9] css changes to nav groups --- components/InTheNews/InTheNews.tsx | 14 ++++++++------ styles/globals.css | 15 +++++++++++++++ 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/components/InTheNews/InTheNews.tsx b/components/InTheNews/InTheNews.tsx index 8e262dd70..0229b9352 100644 --- a/components/InTheNews/InTheNews.tsx +++ b/components/InTheNews/InTheNews.tsx @@ -6,10 +6,14 @@ import Dropdown from "react-bootstrap/Dropdown" import { useMediaQuery } from "usehooks-ts" import { useTranslation } from "next-i18next" + + export const InTheNews = () => { + const { t } = useTranslation("inTheNews") const isMobile = useMediaQuery("(max-width: 768px)") return ( +

{t("title")}

{isMobile ? : } @@ -43,23 +47,21 @@ const TabGroup = () => { return ( -