cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Merge branch 'master' of https://github.com/okbel/e-comm-example

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-15 15:23:06 -05:00
commit c7fab5c963
4 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/core/Layout/Layout.tsx
View File

@ -1,13 +1,13 @@
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 { 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 { UIProvider, useUI } from '@components/ui/context'
import s from './Layout.module.css' import s from './Layout.module.css'
import { ThemeProvider } from 'next-themes'
import { SSRProvider, OverlayProvider } from 'react-aria'
interface LayoutProps { interface LayoutProps {
pageProps: { pageProps: {
@ -41,15 +41,15 @@ const CoreLayout: FC<Props> = ({ children, pages }) => {
} }
const Layout: FC<LayoutProps> = ({ children, pageProps }) => ( const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
<UIProvider> <ThemeProvider>
<ThemeProvider> <SSRProvider>
<SSRProvider> <OverlayProvider>
<OverlayProvider> <UIProvider>
<CoreLayout pages={pageProps.pages}>{children}</CoreLayout> <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
</OverlayProvider> </UIProvider>
</SSRProvider> </OverlayProvider>
</ThemeProvider> </SSRProvider>
</UIProvider> </ThemeProvider>
) )
export default Layout export default Layout

2
components/core/UserNav/UserNav.tsx
View File

@ -16,8 +16,8 @@ const countItems = (count: number, items: any[]) =>
items.reduce(countItem, count) items.reduce(countItem, count)
const UserNav: FC<Props> = ({ className }) => { const UserNav: FC<Props> = ({ className }) => {
const { openSidebar, closeSidebar, displaySidebar } = useUI()
const { data } = useCart() const { data } = useCart()
const { openSidebar, closeSidebar, displaySidebar } = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
return ( return (

22
components/product/ProductCard/ProductCard.module.css
View File

@ -66,8 +66,26 @@
} }
.productTitle { .productTitle {
@apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
max-width: calc(100% - 50px); /* max-width: calc(100% - 50px); */
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
& h2 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
& .strong {
position: relative;
left: -10px;
}
}
@screen lg { @screen lg {
@apply text-2xl; @apply text-2xl;

6
components/product/ProductCard/ProductCard.tsx
View File

@ -48,7 +48,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
<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="flex flex-col flex-1 overflow-hidden">
<div className="flex-1"> <div className="flex-1">
<span className={s.productTitle}>{p.name}</span> <span className={s.productTitle}>
<h2>
<strong>{p.name}</strong>
</h2>
</span>
</div> </div>
<div className="flex-0"> <div className="flex-0">
<div className={s.productPrice}>${p.prices.price.value}</div> <div className={s.productPrice}>${p.prices.price.value}</div>