forked from crowetic/commerce
Layout Changes
This commit is contained in:
parent
7efda91b11
commit
283455fc79
@ -1,7 +0,0 @@
|
|||||||
.root {
|
|
||||||
@apply h-full bg-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
@ -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 />
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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
28
pages/wishlist.tsx
Normal 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
|
Loading…
x
Reference in New Issue
Block a user