From 15e074e3452a4d9787f55956d788eddbb0c1c6bd Mon Sep 17 00:00:00 2001 From: "Wendy(Pengyin) Shan" Date: Wed, 8 Nov 2023 16:33:31 -0600 Subject: [PATCH 01/11] create a prototype page for white paper --- src/components/NavBar.tsx | 31 +++- src/components/issueWhitePaper/cardPaper.tsx | 72 ++++++++ src/components/title1/Title1ProgramTable.tsx | 4 +- src/main.tsx | 2 + src/pages/IssueWhitePaperPage.tsx | 184 +++++++++++++++++++ src/styles/issueWhitePaper.css | 32 ++++ 6 files changed, 315 insertions(+), 10 deletions(-) create mode 100644 src/components/issueWhitePaper/cardPaper.tsx create mode 100644 src/pages/IssueWhitePaperPage.tsx create mode 100644 src/styles/issueWhitePaper.css diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index edf3b1bb..71627bb0 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -16,7 +16,11 @@ import { Link } from "react-router-dom"; import PDLLogo from "./PDLLogo"; const drawerWidth = 240; -const navItems = ["HOME", "EXPLORE FARM BILL DATA", "ABOUT PDL"]; +const navItems = [ + { title: "HOME", link: "/" }, + { title: "ISSUES & WHITE PAPERS", link: "/issue_whitepaper" }, + { title: "ABOUT PDL" } +]; export default function NavBar({ bkColor = "rgba(255, 255, 255, 1)", ftColor = "rgba(255, 255, 255, 1)", @@ -47,9 +51,15 @@ export default function NavBar({ {navItems.map((item) => ( - + - + {item.link ? ( + // + + ) : ( + // + + )} ))} @@ -92,16 +102,21 @@ export default function NavBar({ {navItems.map((item) => { - if (item === "HOME") { + if (item.link) { return ( - ); } return ( - ); })} diff --git a/src/components/issueWhitePaper/cardPaper.tsx b/src/components/issueWhitePaper/cardPaper.tsx new file mode 100644 index 00000000..78269de5 --- /dev/null +++ b/src/components/issueWhitePaper/cardPaper.tsx @@ -0,0 +1,72 @@ +import { Button, Grid, Typography } from "@mui/material"; +import { makeStyles } from "@mui/styles"; +import * as React from "react"; +import DownloadIcon from "@mui/icons-material/Download"; + +export default function CardPaper({ title, author, date, link }): JSX.Element { + const useStyles = makeStyles(() => ({ + downloadButton: { + "&:hover": { + backgroundColor: "transparent" + } + } + })); + const classes = useStyles(); + return ( + + + + + + {title} + + + + + + + Author: {author} + + + + + Date: {date} + + + + + + + + + + + + ); +} diff --git a/src/components/title1/Title1ProgramTable.tsx b/src/components/title1/Title1ProgramTable.tsx index 0465d97c..2ee35bfa 100644 --- a/src/components/title1/Title1ProgramTable.tsx +++ b/src/components/title1/Title1ProgramTable.tsx @@ -194,7 +194,7 @@ function Title1ProgramTable({ sortType: compareWithNumber }, { - Header: "AVG. AVG. RECIPIENT COUNT", + Header: "AVG. AVG. TOTAL RECIPIENTS", accessor: "averageRecipientCount", sortType: compareWithNumber } @@ -219,7 +219,7 @@ function Title1ProgramTable({ sortType: compareWithNumber }, { - Header: "AVG. RECIPIENT COUNT", + Header: "AVG. TOTAL RECIPIENTS", accessor: "averageRecipientCount", sortType: compareWithNumber } diff --git a/src/main.tsx b/src/main.tsx index 6625aeb0..f6c9d628 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -9,6 +9,7 @@ import SNAPPage from "./pages/SNAPPage"; import TitleIPage from "./pages/TitleIPage"; import CropInsurancePage from "./pages/CropInsurancePage"; import ACEPPage from "./pages/ACEPPage"; +import IssueWhitePaperPage from "./pages/IssueWhitePaperPage"; const ScrollToTop = (props: any) => { const location = useLocation(); @@ -32,6 +33,7 @@ export default function Main(): JSX.Element { } /> } /> } /> + } /> ); diff --git a/src/pages/IssueWhitePaperPage.tsx b/src/pages/IssueWhitePaperPage.tsx new file mode 100644 index 00000000..83af5ef1 --- /dev/null +++ b/src/pages/IssueWhitePaperPage.tsx @@ -0,0 +1,184 @@ +import * as React from "react"; +import { Box, createTheme, ThemeProvider, Typography, Grid, Tabs, Tab } from "@mui/material"; +import NavBar from "../components/NavBar"; +import "../styles/issueWhitePaper.css"; +import Footer from "../components/Footer"; +import CardPaper from "../components/issueWhitePaper/cardPaper"; + +export default function IssueWhitePaperPage(): JSX.Element { + const [tab, setTab] = React.useState(0); + + const defaultTheme = createTheme({ + spacing: 8 + }); + const switchBarTable = (event, newTab) => { + if (newTab !== null) { + setTab(newTab); + } + }; + return ( + + + + + + + + + + + + + + + + + + {/* Copy card components and make new ones! */} + + + + + + + + + + {/* Copy card components and make new ones! */} + + + + + + + + + + + + More publication coming soon ... + + +