Legistator page (skeleton)

components/featureFlags.ts

@@ -19,7 +19,9 @@ export const FeatureFlags = z.object({
   /** Phone Verification UI changes **/
   phoneVerificationUI: z.boolean().default(false),
   /** Ballot Questions feature */
-  ballotQuestions: z.boolean().default(false)
+  ballotQuestions: z.boolean().default(false),
+  /** Legislators Page feature **/
+  legislators: z.boolean().default(false)
 })
 
 export type FeatureFlags = z.infer<typeof FeatureFlags>
@@ -41,7 +43,8 @@ const defaults: Record<Env, FeatureFlags> = {
     showLLMFeatures: true,
     hearingsAndTranscriptions: true,
     phoneVerificationUI: true,
-    ballotQuestions: true
+    ballotQuestions: true,
+    legislators: true
   },
   production: {
     testimonyDiffing: false,
@@ -52,7 +55,8 @@ const defaults: Record<Env, FeatureFlags> = {
     showLLMFeatures: true,
     hearingsAndTranscriptions: true,
     phoneVerificationUI: false,
-    ballotQuestions: false
+    ballotQuestions: false,
+    legislators: false
   },
   test: {
     testimonyDiffing: false,
@@ -63,7 +67,8 @@ const defaults: Record<Env, FeatureFlags> = {
     showLLMFeatures: true,
     hearingsAndTranscriptions: true,
     phoneVerificationUI: true,
-    ballotQuestions: false
+    ballotQuestions: false,
+    legislators: false
   }
 }
 

components/legislator/LegislatorPage.tsx

@@ -0,0 +1,128 @@
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useTranslation } from "next-i18next"
+import ErrorPage from "next/error"
+import styled from "styled-components"
+
+import { Col, Container, Row, Spinner } from "../bootstrap"
+import { usePublicProfile } from "../db"
+
+import { LegislatorSidebar } from "./SidebarComponents/LegislatorSidebar"
+import { LegislatorTabs } from "./TabComponents/LegislatorTabs"
+
+import { useFlags } from "components/featureFlags"
+import { Internal } from "components/links"
+
+const DirectoryPath = styled.div.attrs(props => ({
+  className: `align-items-center d-flex flex-nowrap ${props.className}`
+}))`
+  font-size: 12px;
+`
+
+const HeaderBlock = styled.div`
+  background-color: white;
+  border: "1px #ced4da solid";
+  border-radius: 5px;
+  margin-top: 8px;
+  padding: 16px;
+`
+
+const StatBlock = styled(Col).attrs(props => ({
+  className: `d-flex col-4 flex-grow-1 ${props.className}`,
+  md: `2`
+}))`
+  background-color: white;
+  border: 1px #ced4da solid;
+  border-radius: 5px;
+  margin-top: 4px;
+  padding: 16px;
+`
+
+const StatLine = styled(Row).attrs(props => ({
+  className: `text-nowrap ${props.className}`
+}))`
+  font-size: 12px;
+`
+
+const StatNum = styled.div.attrs(props => ({
+  className: `mx-auto ${props.className}`
+}))`
+  color: #1a3185;
+  font-size: 22px;
+  font-weight: 700;
+  width: max-content;
+`
+
+export function LegislatorPage(props: { id: string }) {
+  const { t } = useTranslation("legislators")
+  const { result: profile, loading } = usePublicProfile(props.id)
+  const { legislators } = useFlags()
+
+  console.log("Pro: ", profile)
+
+  if (loading) {
+    return (
+      <Row>
+        <Spinner animation="border" className="mx-auto" />
+      </Row>
+    )
+  }
+  if (!legislators) {
+    return <ErrorPage statusCode={404} withDarkMode={false} />
+  }
+  if (!profile) {
+    return <ErrorPage statusCode={404} withDarkMode={false} />
+  }
+
+  return (
+    <Container className="mt-3 mb-3">
+      <DirectoryPath>
+        <Internal className="text-decoration-none" href="/">
+          {t("home")}
+        </Internal>
+        <FontAwesomeIcon className="fa-2xs px-2 " icon={faChevronRight} />
+        <div style={{ color: "#6c757d" }}>{t("legislators")}</div>
+        <FontAwesomeIcon className="fa-2xs px-2 " icon={faChevronRight} />
+        <div style={{ color: "#6c757d" }}>{profile.fullName}</div>
+      </DirectoryPath>
+
+      <HeaderBlock>Header Info Goes Here</HeaderBlock>
+
+      <div className="d-flex flex-wrap gap-2 justify-content-between mt-2">
+        <StatBlock>
+          <Col className="flex-grow-0 mx-auto">
+            <StatNum>?</StatNum>
+            <StatLine>{t("termsServed")}</StatLine>
+          </Col>
+        </StatBlock>
+        <StatBlock>
+          <Col className="flex-grow-0 mx-auto">
+            <StatNum>?</StatNum>
+            <StatLine>{t("billsSponsored")}</StatLine>
+          </Col>
+        </StatBlock>
+        <StatBlock>
+          <Col className="flex-grow-0 mx-auto">
+            <StatNum>?</StatNum>
+            <StatLine>{t("cosponsored")}</StatLine>
+          </Col>
+        </StatBlock>
+        <StatBlock>
+          <Col className="flex-grow-0 mx-auto">
+            <StatNum>?</StatNum>
+            <StatLine>{t("fundsRaised")}</StatLine>
+          </Col>
+        </StatBlock>
+      </div>
+
+      <Row>
+        <Col className={`mt-4`} md="9">
+          <LegislatorTabs />
+        </Col>
+        <Col className={`mt-4`} md="3">
+          <LegislatorSidebar />
+        </Col>
+      </Row>
+    </Container>
+  )
+}

components/legislator/SidebarComponents/Biography.tsx

@@ -0,0 +1,3 @@
+export function Biography() {
+  return <div>- Biography</div>
+}

components/legislator/SidebarComponents/LegislatorSidebar.tsx

@@ -0,0 +1,14 @@
+import { Biography } from "./Biography"
+import { OtherTestimony } from "./OtherTestimony"
+import { UpcomingHearings } from "./UpcomingHearings"
+
+export function LegislatorSidebar() {
+  return (
+    <>
+      Sidebar Components
+      <OtherTestimony />
+      <UpcomingHearings />
+      <Biography />
+    </>
+  )
+}

components/legislator/SidebarComponents/OtherTestimony.tsx

@@ -0,0 +1,3 @@
+export function OtherTestimony() {
+  return <div>- Other Testimony</div>
+}

components/legislator/SidebarComponents/UpcomingHearings.tsx

@@ -0,0 +1,3 @@
+export function UpcomingHearings() {
+  return <div>- Upcoming Hearings</div>
+}

components/legislator/TabComponents/Bills.tsx

@@ -0,0 +1,3 @@
+export function Bills() {
+  return <div>- Bills</div>
+}

components/legislator/TabComponents/District.tsx

@@ -0,0 +1,3 @@
+export function District() {
+  return <div>- District</div>
+}

components/legislator/TabComponents/Elections.tsx

@@ -0,0 +1,3 @@
+export function Elections() {
+  return <div>- Elections</div>
+}

components/legislator/TabComponents/Finance.tsx

@@ -0,0 +1,3 @@
+export function Finance() {
+  return <div>- Finance</div>
+}

components/legislator/TabComponents/LegislatorTabs.tsx

@@ -0,0 +1,128 @@
+import { useTranslation } from "next-i18next"
+import { TabPane } from "react-bootstrap"
+import TabContainer from "react-bootstrap/TabContainer"
+import styled from "styled-components"
+
+import { Container, Nav } from "../../bootstrap"
+
+import { Bills } from "./Bills"
+import { District } from "./District"
+import { Elections } from "./Elections"
+import { Finance } from "./Finance"
+import { Priorities } from "./Priorities"
+import { Testimony } from "./Testimony"
+import { Votes } from "./Votes"
+
+import {
+  StyledTabContent,
+  TabNavWrapper,
+  TabType
+} from "components/EditProfilePage/StyledEditProfileComponents"
+
+const tabCategory = [
+  "priorities",
+  "bills",
+  "elections",
+  "finance",
+  "district",
+  "testimony",
+  "votes"
+]
+type TabCategories = (typeof tabCategory)[number]
+
+const TabNavLink = styled(Nav.Link).attrs(props => ({
+  className: `rounded-top m-0 p-0 ${props.className}`
+}))`
+  color: #6c757d;
+
+  &.active {
+    color: #1a3185;
+    font-weight: bold;
+  }
+`
+
+const TabNavItem = ({
+  tab,
+  i: i,
+  className
+}: {
+  tab: TabType
+  i: number
+  className?: string
+}) => {
+  return (
+    <Nav.Item className={`flex-lg-fill ${className}`} key={tab.eventKey}>
+      <TabNavLink eventKey={tab.eventKey} className={`rounded-top m-0 p-0`}>
+        <p className={`fs-6 my-0 text-nowrap ${i === 0 ? "" : "mx-4"}`}>
+          {tab.title}
+        </p>
+        <hr className={`my-0`} />
+      </TabNavLink>
+    </Nav.Item>
+  )
+}
+
+export function LegislatorTabs({
+  tabCategory
+}: {
+  tabCategory?: TabCategories
+}) {
+  const { t } = useTranslation("legislators")
+
+  const tabs = [
+    {
+      title: t("tabs.priorities"),
+      eventKey: "priorities",
+      content: <Priorities />
+    },
+    {
+      title: t("tabs.bills"),
+      eventKey: "bills",
+      content: <Bills />
+    },
+    {
+      title: t("tabs.elections"),
+      eventKey: "elections",
+      content: <Elections />
+    },
+    {
+      title: t("tabs.finance"),
+      eventKey: "finance",
+      content: <Finance />
+    },
+    {
+      title: t("tabs.district"),
+      eventKey: "district",
+      content: <District />
+    },
+    {
+      title: t("tabs.testimony"),
+      eventKey: "testimony",
+      content: <Testimony />
+    },
+    {
+      title: t("tabs.votes"),
+      eventKey: "votes",
+      content: <Votes />
+    }
+  ]
+
+  return (
+    <Container>
+      <TabContainer defaultActiveKey="priorities" activeKey={tabCategory}>
+        <TabNavWrapper>
+          {tabs.map((t, i) => (
+            <TabNavItem key={i} tab={t} i={i} />
+          ))}
+        </TabNavWrapper>
+        <StyledTabContent>
+          {tabs.map(t => (
+            <TabPane key={t.eventKey} title={t.title} eventKey={t.eventKey}>
+              {t.content}
+            </TabPane>
+          ))}
+        </StyledTabContent>
+      </TabContainer>
+    </Container>
+  )
+}

components/legislator/TabComponents/Priorities.tsx

@@ -0,0 +1,3 @@
+export function Priorities() {
+  return <div>- Priorities</div>
+}

components/legislator/TabComponents/Testimony.tsx

@@ -0,0 +1,3 @@
+export function Testimony() {
+  return <div>- Testimony</div>
+}

components/legislator/TabComponents/Votes.tsx

@@ -0,0 +1,3 @@
+export function Votes() {
+  return <div>- Votes</div>
+}

components/legislator/index.ts

@@ -0,0 +1 @@
+export * from "./LegislatorPage"

pages/hearing/[hearingId].tsx

@@ -9,7 +9,7 @@ import { fetchHearingData, HearingData } from "components/hearing/hearing"
 const Query = z.object({ hearingId: z.coerce.number() })
 
 export default createPage<{ hearingData: HearingData }>({
-  titleI18nKey: "Hearing",
+  titleI18nKey: "navigation.hearing",
   Page: ({ hearingData }) => {
     return <HearingDetails hearingData={hearingData} />
   }