forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
c7fab5c963
@ -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
|
||||||
|
@ -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 (
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user