mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extract public pages layout

Browse Source
This commit is contained in:
m5r
2021-08-30 05:28:42 +08:00
parent 47aa722697
commit 1e681ca693
6 changed files with 119 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/public-area/components/base-layout.tsx Normal file
View File

@ -0,0 +1,29 @@
import type { FunctionComponent } from "react";
import { Head } from "blitz";
import Header from "./header";
const BaseLayout: FunctionComponent = ({ children }) => (
<>
<Head>
<title>Shellphone: Your Personal Cloud Phone</title>
<link
rel="preload"
href="/fonts/P22MackinacPro-ExtraBold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
<section className="font-inter antialiased bg-white text-gray-900 tracking-tight">
<section className="flex flex-col min-h-screen overflow-hidden">
<Header />
<main className="flex-grow">{children}</main>
</section>
</section>
</>
);
export default BaseLayout;

18
app/public-area/components/header.tsx
View File

@ -50,14 +50,6 @@ function DesktopNavLink({ href, label }: NavLinkProps) {
);
}
function MobileNavLink({ href, label }: NavLinkProps) {
return (
<Link href={href}>
<a className="flex text-gray-600 hover:text-gray-900 py-2">{label}</a>
</Link>
);
}
function MobileNav() {
const [mobileNavOpen, setMobileNavOpen] = useState(false);
@ -183,6 +175,16 @@ function MobileNav() {
</Transition.Root>
</div>
);
function MobileNavLink({ href, label }: NavLinkProps) {
return (
<Link href={href}>
<a onClick={() => setMobileNavOpen(false)} className="flex text-gray-600 hover:text-gray-900 py-2">
{label}
</a>
</Link>
);
}
}
export default Header;

23
app/public-area/components/layout.tsx Normal file
View File

@ -0,0 +1,23 @@
import type { FunctionComponent } from "react";
import BaseLayout from "./base-layout";
type Props = {
title: string;
};
const Layout: FunctionComponent<Props> = ({ children, title }) => (
<BaseLayout>
<section className="max-w-6xl mx-auto px-4 sm:px-6">
<div className="pt-32 pb-10 md:pt-34 md:pb-16">
<div className="max-w-5xl mx-auto">
<h1 className="h1 mb-16 font-extrabold font-mackinac">{title}</h1>
</div>
<div className="max-w-3xl mx-auto text-lg xl:text-xl flow-root">{children}</div>
</div>
</section>
</BaseLayout>
);
export default Layout;