4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-15 16:45:42 -05:00
commit 0779985340
13 changed files with 95 additions and 112 deletions

View File

@ -53,8 +53,6 @@ const CartItem = ({
} }
}, [item.quantity]) }, [item.quantity])
console.log(item)
return ( return (
<li className="flex flex-row space-x-8 py-6"> <li className="flex flex-row space-x-8 py-6">
<div className="w-12 h-12 bg-violet relative overflow-hidden"> <div className="w-12 h-12 bg-violet relative overflow-hidden">

View File

@ -27,9 +27,6 @@ const CartSidebarView: FC = () => {
const items = data?.line_items.physical_items ?? [] const items = data?.line_items.physical_items ?? []
console.log('CART', data, isEmpty)
// This should come from the API via hook I guess
const error = null const error = null
const success = null const success = null
@ -95,7 +92,7 @@ const CartSidebarView: FC = () => {
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide"> <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
My Cart My Cart
</h2> </h2>
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200"> <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
{items.map((item) => ( {items.map((item) => (
<CartItem <CartItem
key={item.id} key={item.id}
@ -107,7 +104,7 @@ const CartSidebarView: FC = () => {
</div> </div>
<div className="flex-shrink-0 px-4 py-5 sm:px-6"> <div className="flex-shrink-0 px-4 py-5 sm:px-6">
<div className="border-t border-gray-200"> <div className="border-t border-accents-3">
<ul className="py-3"> <ul className="py-3">
<li className="flex justify-between py-1"> <li className="flex justify-between py-1">
<span>Subtotal</span> <span>Subtotal</span>
@ -122,7 +119,7 @@ const CartSidebarView: FC = () => {
<span>FREE</span> <span>FREE</span>
</li> </li>
</ul> </ul>
<div className="flex justify-between border-t border-gray-300 py-3 font-bold mb-10"> <div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">
<span>Total</span> <span>Total</span>
<span>{total}</span> <span>{total}</span>
</div> </div>

View File

@ -0,0 +1,18 @@
import { FC } from 'react'
import NextHead from 'next/head'
import { DefaultSeo } from 'next-seo'
import config from '@config/seo.json'
const Head: FC = () => {
return (
<>
<DefaultSeo {...config} />
<NextHead>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
</NextHead>
</>
)
}
export default Head

View File

@ -0,0 +1 @@
export { default } from './Head'

View File

@ -1,58 +1,40 @@
import { FC } from 'react' import { FC } from 'react'
import cn from 'classnames' import cn from 'classnames'
import { ThemeProvider } from 'next-themes'
import { SSRProvider, OverlayProvider } from 'react-aria'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
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'
import { CartSidebarView } from '@components/cart' import { CartSidebarView } from '@components/cart'
import { UIProvider, useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import s from './Layout.module.css' import s from './Layout.module.css'
interface LayoutProps { interface Props {
pageProps: { pageProps: {
pages?: Page[] pages?: Page[]
} }
} }
interface Props { const Layout: FC<Props> = ({ children, pageProps }) => {
pages?: Page[]
}
const CoreLayout: FC<Props> = ({ children, pages }) => {
const { displaySidebar, closeSidebar } = useUI() const { displaySidebar, closeSidebar } = useUI()
return ( return (
<div className={cn(s.root)}> <CommerceProvider locale="en-us">
<Featurebar <div className={cn(s.root)}>
title="Free Standard Shipping on orders over $99.99" <Featurebar
description="Due to COVID-19, some orders may experience processing and delivery delays." title="Free Standard Shipping on orders over $99.99"
/> description="Due to COVID-19, some orders may experience processing and delivery delays."
<Container> />
<Navbar /> <Container>
</Container> <Navbar />
<main className="fit">{children}</main> </Container>
<Footer pages={pages} /> <main className="fit">{children}</main>
<Sidebar show={displaySidebar} close={closeSidebar}> <Footer pages={pageProps.pages} />
<CartSidebarView /> <Sidebar show={displaySidebar} close={closeSidebar}>
</Sidebar> <CartSidebarView />
</div> </Sidebar>
</div>
</CommerceProvider>
) )
} }
const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
<ThemeProvider>
<SSRProvider>
<OverlayProvider>
<CommerceProvider locale="en-us">
<UIProvider>
<CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
</UIProvider>
</CommerceProvider>
</OverlayProvider>
</SSRProvider>
</ThemeProvider>
)
export default Layout export default Layout

View File

@ -6,3 +6,4 @@ export { default as Navbar } from './Navbar'
export { default as Searchbar } from './Searchbar' export { default as Searchbar } from './Searchbar'
export { default as UserNav } from './UserNav' export { default as UserNav } from './UserNav'
export { default as Toggle } from './Toggle' export { default as Toggle } from './Toggle'
export { default as Head } from './Head'

View File

@ -6,31 +6,31 @@
@apply scale-75; @apply scale-75;
} }
& .productTitle, & .productTitle > span,
& .productPrice, & .productPrice,
& .wishlistButton { & .wishlistButton {
@apply bg-secondary text-secondary; @apply bg-secondary text-secondary;
} }
&:nth-child(6n + 1) .productTitle, &:nth-child(6n + 1) .productTitle > span,
&:nth-child(6n + 1) .productPrice, &:nth-child(6n + 1) .productPrice,
&:nth-child(6n + 1) .wishlistButton { &:nth-child(6n + 1) .wishlistButton {
@apply bg-violet text-white; @apply bg-violet text-white;
} }
&:nth-child(6n + 5) .productTitle, &:nth-child(6n + 5) .productTitle > span,
&:nth-child(6n + 5) .productPrice, &:nth-child(6n + 5) .productPrice,
&:nth-child(6n + 5) .wishlistButton { &:nth-child(6n + 5) .wishlistButton {
@apply bg-blue text-white; @apply bg-blue text-white;
} }
&:nth-child(6n + 3) .productTitle, &:nth-child(6n + 3) .productTitle > span,
&:nth-child(6n + 3) .productPrice, &:nth-child(6n + 3) .productPrice,
&:nth-child(6n + 3) .wishlistButton { &:nth-child(6n + 3) .wishlistButton {
@apply bg-pink text-white; @apply bg-pink text-white;
} }
&:nth-child(6n + 6) .productTitle, &:nth-child(6n + 6) .productTitle > span,
&:nth-child(6n + 6) .productPrice, &:nth-child(6n + 6) .productPrice,
&:nth-child(6n + 6) .wishlistButton { &:nth-child(6n + 6) .wishlistButton {
@apply bg-cyan text-white; @apply bg-cyan text-white;
@ -66,29 +66,13 @@
} }
.productTitle { .productTitle {
/* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */ line-height: 51px;
/* max-width: calc(100% - 50px); */ width: 200px;
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
& h2 { & span {
background-color: #c0c; @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
padding: 4px 0; box-decoration-break: clone;
color: #fff; -webkit-box-decoration-break: clone;
display: inline;
margin: 0;
& .strong {
position: relative;
left: -10px;
}
}
@screen lg {
@apply text-2xl;
} }
} }

View File

@ -46,17 +46,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
</div> </div>
<div className={s.squareBg} /> <div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-10 relative"> <div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col flex-1 overflow-hidden"> <div className="">
<div className="flex-1"> <div className={s.productTitle}>
<span className={s.productTitle}> <span>{p.name}</span>
<h2>
<strong>{p.name}</strong>
</h2>
</span>
</div>
<div className="flex-0">
<div className={s.productPrice}>${p.prices.price.value}</div>
</div> </div>
<span className={s.productPrice}>${p.prices.price.value}</span>
</div> </div>
<div className={s.wishlistButton}> <div className={s.wishlistButton}>
<Heart /> <Heart />

View File

@ -1,4 +1,6 @@
import React, { FC } from 'react' import React, { FC } from 'react'
import { ThemeProvider } from 'next-themes'
import { SSRProvider, OverlayProvider } from 'react-aria'
export interface State { export interface State {
displaySidebar: boolean displaySidebar: boolean
@ -63,3 +65,13 @@ function uiReducer(state: State, action: Action) {
} }
} }
} }
export const ManagedUIContext: FC = ({ children }) => (
<UIProvider>
<ThemeProvider>
<SSRProvider>
<OverlayProvider>{children}</OverlayProvider>
</SSRProvider>
</ThemeProvider>
</UIProvider>
)

View File

@ -1,18 +0,0 @@
{
"seo": {
"title": "ACME Storefront | Powered by Next.js Commerce",
"titleTemplate": "%s - ACME Storefront",
"description": "Next.js Commerce -> https://www.nextjs.org/commerce",
"openGraph": {
"type": "website",
"locale": "en_IE",
"url": "https://nextjs.org/commerce",
"site_name": "Next.js Commerce"
},
"twitter": {
"handle": "@nextjs",
"site": "@nextjs",
"cardType": "summary_large_image"
}
}
}

16
config/seo.json Normal file
View File

@ -0,0 +1,16 @@
{
"title": "ACME Storefront | Powered by Next.js Commerce",
"titleTemplate": "%s - ACME Storefront",
"description": "Next.js Commerce -> https://www.nextjs.org/commerce",
"openGraph": {
"type": "website",
"locale": "en_IE",
"url": "https://nextjs.org/commerce",
"site_name": "Next.js Commerce"
},
"twitter": {
"handle": "@nextjs",
"site": "@nextjs",
"cardType": "summary_large_image"
}
}

View File

@ -3,11 +3,10 @@ import '@assets/tailwind.css'
import '@assets/utils.css' import '@assets/utils.css'
import 'animate.css' import 'animate.css'
import { FC } from 'react' import { FC } from 'react'
import { DefaultSeo } from 'next-seo'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import Head from 'next/head'
import config from '../config.json' import { ManagedUIContext } from '@components/ui/context'
import { Head } from '@components/core'
const Noop: FC = ({ children }) => <>{children}</> const Noop: FC = ({ children }) => <>{children}</>
@ -16,14 +15,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
return ( return (
<> <>
<Head> <Head />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <ManagedUIContext>
<link rel="manifest" href="/site.webmanifest" key="site-manifest" /> <Layout pageProps={pageProps}>
</Head> <Component {...pageProps} />
<DefaultSeo {...config.seo} /> </Layout>
<Layout pageProps={pageProps}> </ManagedUIContext>
<Component {...pageProps} />
</Layout>
</> </>
) )
} }

View File

@ -18,7 +18,8 @@
"@lib/*": ["lib/*"], "@lib/*": ["lib/*"],
"@assets/*": ["assets/*"], "@assets/*": ["assets/*"],
"@components/*": ["components/*"], "@components/*": ["components/*"],
"@utils/*": ["utils/*"] "@utils/*": ["utils/*"],
"@config/*": ["config/*"]
} }
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],