4
0
forked from crowetic/commerce

Layout Changes

This commit is contained in:
Belen Curcio 2020-10-13 10:03:53 -03:00
parent 7efda91b11
commit 283455fc79
5 changed files with 64 additions and 46 deletions

View File

@ -1,7 +0,0 @@
.root {
@apply h-full bg-primary;
}
.main {
min-height: 100vh;
}

View File

@ -1,6 +1,5 @@
import cn from 'classnames' import cn from 'classnames'
import { FC } from 'react' import { FC } from 'react'
import s from './Layout.module.css'
import { CommerceProvider } from '@lib/bigcommerce' import { CommerceProvider } from '@lib/bigcommerce'
import { Navbar, Featurebar, Footer } from '@components/core' import { Navbar, Featurebar, Footer } from '@components/core'
import { Container, Sidebar } from '@components/ui' import { Container, Sidebar } from '@components/ui'
@ -13,7 +12,7 @@ interface Props {
} }
const CoreLayout: FC<Props> = ({ className, children }) => { const CoreLayout: FC<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn('h-full bg-primary', className)
const { displaySidebar, closeSidebar } = useUI() const { displaySidebar, closeSidebar } = useUI()
return ( return (
@ -25,7 +24,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
<Container> <Container>
<Navbar /> <Navbar />
</Container> </Container>
<main className={s.main}>{children}</main> <main className="h-screen">{children}</main>
<Footer /> <Footer />
<Sidebar show={displaySidebar} close={closeSidebar}> <Sidebar show={displaySidebar} close={closeSidebar}>
<CartSidebarView /> <CartSidebarView />

View File

@ -2,7 +2,7 @@ import s from './Navbar.module.css'
import { FC } from 'react' import { FC } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useTheme } from 'next-themes' import { useTheme } from 'next-themes'
import { Logo, Container } from '@components/ui' import { Logo } from '@components/ui'
import { Searchbar, Toggle, UserNav } from '@components/core' import { Searchbar, Toggle, UserNav } from '@components/core'
interface Props { interface Props {
className?: string className?: string
@ -13,45 +13,43 @@ const Navbar: FC<Props> = ({ className }) => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<Container> <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative"> <div className="flex flex-1 items-center">
<div className="flex flex-1 items-center"> <Link href="/">
<a className="cursor-pointer">
<Logo />
</a>
</Link>
<nav className="space-x-4 ml-6 hidden md:block">
<Link href="/"> <Link href="/">
<a className="cursor-pointer"> <a className={s.link}>All</a>
<Logo />
</a>
</Link> </Link>
<nav className="space-x-4 ml-6 hidden md:block"> <Link href="/">
<Link href="/"> <a className={s.link}>Clothes</a>
<a className={s.link}>All</a> </Link>
</Link> <Link href="/">
<Link href="/"> <a className={s.link}>Accessories</a>
<a className={s.link}>Clothes</a> </Link>
</Link> </nav>
<Link href="/">
<a className={s.link}>Accessories</a>
</Link>
</nav>
</div>
<div className="md:flex flex-1 justify-center hidden">
<Searchbar />
</div>
<div className="flex flex-initial md:flex-1 justify-end space-x-8">
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
<UserNav />
</div>
</div> </div>
<div className="block flex pb-4 md:hidden px-4 md:px-6">
<div className="md:flex flex-1 justify-center hidden">
<Searchbar /> <Searchbar />
</div> </div>
</Container>
<div className="flex flex-initial md:flex-1 justify-end space-x-8">
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
<UserNav />
</div>
</div>
<div className="block flex pb-4 md:hidden px-4 md:px-6">
<Searchbar />
</div>
</div> </div>
) )
} }

View File

@ -8,7 +8,7 @@ interface Props {
} }
const Container: FC<Props> = ({ children, className, el = 'div' }) => { const Container: FC<Props> = ({ children, className, el = 'div' }) => {
const rootClassName = cn('mx-auto max-w-7xl', className) const rootClassName = cn('mx-auto max-w-7xl px-6 md:px-12', className)
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement

28
pages/wishlist.tsx Normal file
View File

@ -0,0 +1,28 @@
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
import { Layout } from '@components/core'
import { Container } from '@components/ui'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { products } = await getAllProducts()
const { categories, brands } = await getSiteInfo()
return {
props: { products, categories, brands },
}
}
export default function Home({}: InferGetStaticPropsType<
typeof getStaticProps
>) {
return (
<Container>
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
My Wishlist
</h2>
</Container>
)
}
Home.Layout = Layout