diff --git a/app/public-area/components/base-layout.tsx b/app/public-area/components/base-layout.tsx new file mode 100644 index 0000000..b62fe15 --- /dev/null +++ b/app/public-area/components/base-layout.tsx @@ -0,0 +1,29 @@ +import type { FunctionComponent } from "react"; +import { Head } from "blitz"; + +import Header from "./header"; + +const BaseLayout: FunctionComponent = ({ children }) => ( + <> + + Shellphone: Your Personal Cloud Phone + + + +
+
+
+ +
{children}
+
+
+ +); + +export default BaseLayout; diff --git a/app/public-area/components/header.tsx b/app/public-area/components/header.tsx index 2370e98..37d7999 100644 --- a/app/public-area/components/header.tsx +++ b/app/public-area/components/header.tsx @@ -50,14 +50,6 @@ function DesktopNavLink({ href, label }: NavLinkProps) { ); } -function MobileNavLink({ href, label }: NavLinkProps) { - return ( - - {label} - - ); -} - function MobileNav() { const [mobileNavOpen, setMobileNavOpen] = useState(false); @@ -183,6 +175,16 @@ function MobileNav() { ); + + function MobileNavLink({ href, label }: NavLinkProps) { + return ( + + setMobileNavOpen(false)} className="flex text-gray-600 hover:text-gray-900 py-2"> + {label} + + + ); + } } export default Header; diff --git a/app/public-area/components/layout.tsx b/app/public-area/components/layout.tsx new file mode 100644 index 0000000..18fe9d4 --- /dev/null +++ b/app/public-area/components/layout.tsx @@ -0,0 +1,23 @@ +import type { FunctionComponent } from "react"; + +import BaseLayout from "./base-layout"; + +type Props = { + title: string; +}; + +const Layout: FunctionComponent = ({ children, title }) => ( + +
+
+
+

{title}

+
+ +
{children}
+
+
+ +); + +export default Layout; diff --git a/app/public-area/pages/index.tsx b/app/public-area/pages/index.tsx index 9da4a3a..a10ff82 100644 --- a/app/public-area/pages/index.tsx +++ b/app/public-area/pages/index.tsx @@ -1,42 +1,21 @@ import type { BlitzPage } from "blitz"; -import { Head } from "blitz"; -import Header from "../components/header"; +import BaseLayout from "../components/base-layout"; import ReferralBanner from "../components/referral-banner"; import Hero from "../components/hero"; import FAQs from "../components/faqs"; -import Footer from "../components/footer"; const LandingPage: BlitzPage = () => { return ( <> - - Shellphone: Your Personal Cloud Phone - - -
-
-
- -
- - -
- -
-
-
+ + ); }; +LandingPage.getLayout = (page) => {page}; LandingPage.suppressFirstRenderFlicker = true; export default LandingPage; diff --git a/app/public-area/pages/open-metrics.tsx b/app/public-area/pages/open-metrics.tsx index 757da56..f2ae7a2 100644 --- a/app/public-area/pages/open-metrics.tsx +++ b/app/public-area/pages/open-metrics.tsx @@ -1,10 +1,9 @@ import type { BlitzPage } from "blitz"; -import { Head, useQuery } from "blitz"; +import { useQuery } from "blitz"; import getMetrics from "../queries/get-metrics"; -import Header from "../components/header"; -import Footer from "../components/footer"; +import Layout from "../components/layout"; const initialData = { phoneNumbers: 0, @@ -17,43 +16,11 @@ const OpenMetrics: BlitzPage = () => { const { phoneNumbers, smsExchanged, minutesCalled } = metrics ?? initialData; return ( - <> - - Shellphone: Your Personal Cloud Phone - - -
-
-
- -
-
-
-
-

Open Metrics

-
- -
-
- - - -
-
-
-
-
- -
-
-
- +
+ + + +
); }; @@ -66,6 +33,7 @@ function Card({ title, value }: any) { ); } +OpenMetrics.getLayout = (page) => {page}; OpenMetrics.suppressFirstRenderFlicker = true; export default OpenMetrics; diff --git a/app/public-area/pages/roadmap.tsx b/app/public-area/pages/roadmap.tsx index e70fb02..6b68e89 100644 --- a/app/public-area/pages/roadmap.tsx +++ b/app/public-area/pages/roadmap.tsx @@ -5,104 +5,56 @@ import { CheckIcon, XIcon, TerminalIcon } from "@heroicons/react/solid"; import Header from "../components/header"; import Footer from "../components/footer"; +import Layout from "../components/layout"; const Roadmap: BlitzPage = () => { return ( - <> - - Shellphone: Your Personal Cloud Phone - - -
-
-
- -
-
-
-
-

(Rough) Roadmap

+
    + {roadmap.map((feature, index) => { + const isDone = feature.status === "done"; + const isInProgress = feature.status === "in-progress"; + return ( +
  • +
    + {index !== roadmap.length - 1 ? ( +
-
- -
-
-
- + + + ); + })} + ); }; @@ -185,6 +137,7 @@ const formatter = Intl.DateTimeFormat("en-US", { year: "numeric", }); +Roadmap.getLayout = (page) => {page}; Roadmap.suppressFirstRenderFlicker = true; export default Roadmap;