4
0
forked from crowetic/commerce

Added shared layout with _app

This commit is contained in:
Luis Alvarez 2020-10-01 21:30:08 -05:00
parent 6587ab10ae
commit cf7c85e3ba
4 changed files with 21 additions and 15 deletions

View File

@ -14,6 +14,7 @@ interface Props {
const CoreLayout: FunctionComponent<Props> = ({ className, children }) => { const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
const { displaySidebar } = useUI() const { displaySidebar } = useUI()
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<Featurebar <Featurebar

View File

@ -1,6 +1,15 @@
import { FC } from 'react'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import '@assets/global.css' import '@assets/global.css'
const Noop: FC = ({ children }) => <>{children}</>
export default function MyApp({ Component, pageProps }: AppProps) { export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} /> const Layout = (Component as any).Layout || Noop
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
} }

View File

@ -14,9 +14,7 @@ export default function Home({
products, products,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
console.log('PRODUCTS', products) console.log('PRODUCTS', products)
return ( return <ProductGrid products={products} />
<Layout>
<ProductGrid products={products} />
</Layout>
)
} }
Home.Layout = Layout

View File

@ -43,7 +43,7 @@ export async function getStaticPaths() {
} }
} }
export default function Home({ export default function Slug({
product, product,
productData, productData,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
@ -51,13 +51,11 @@ export default function Home({
const router = useRouter() const router = useRouter()
return ( return router.isFallback ? (
<Layout> <h1>Loading...</h1>
{router.isFallback ? ( ) : (
<h1>Loading...</h1> <ProductView productData={productData} />
) : (
<ProductView productData={productData} />
)}
</Layout>
) )
} }
Slug.Layout = Layout