4
0
forked from crowetic/commerce

ProductStyling

This commit is contained in:
Belen Curcio 2020-10-15 18:02:49 -03:00
parent ae43c92661
commit 5e4d2c2f8f
6 changed files with 39 additions and 59 deletions

View File

@ -4,16 +4,15 @@ import s from './Layout.module.css'
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 { CommerceProvider } from '@lib/bigcommerce' import { CommerceProvider } from '@lib/bigcommerce'
import { ThemeProvider } from 'next-themes'
import { SSRProvider, OverlayProvider } from 'react-aria'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
} }
const CoreLayout: FC<Props> = ({ className, children }) => { const Layout: FC<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
const { displaySidebar, closeSidebar } = useUI() const { displaySidebar, closeSidebar } = useUI()
@ -35,16 +34,4 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
) )
} }
const Layout: FC<Props> = (props) => (
<ThemeProvider>
<SSRProvider>
<OverlayProvider>
<UIProvider>
<CoreLayout {...props} />
</UIProvider>
</OverlayProvider>
</SSRProvider>
</ThemeProvider>
)
export default Layout export default Layout

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

@ -18,7 +18,7 @@ export default function useCart<T>(
fetcherFn: HookFetcher<T | null, CartInput>, fetcherFn: HookFetcher<T | null, CartInput>,
swrOptions?: ConfigInterface<T | null> swrOptions?: ConfigInterface<T | null>
) { ) {
const { cartCookie } = useCommerce() const { cartCookie = '' } = useCommerce() | {}
const fetcher: typeof fetcherFn = (options, input, fetch) => { const fetcher: typeof fetcherFn = (options, input, fetch) => {
input.cartId = Cookies.get(cartCookie) input.cartId = Cookies.get(cartCookie)
return fetcherFn(options, input, fetch) return fetcherFn(options, input, fetch)

View File

@ -3,9 +3,9 @@ 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 { Head } from '@components/core'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import { ManagedUIContext } from '@components/ui/context'
import { CommerceProvider } from '@lib/bigcommerce' import { CommerceProvider } from '@lib/bigcommerce'
const Noop: FC = ({ children }) => <>{children}</> const Noop: FC = ({ children }) => <>{children}</>
@ -15,10 +15,13 @@ export default function MyApp({ Component, pageProps }: AppProps) {
return ( return (
<> <>
<Head />
<CommerceProvider locale="en-us"> <CommerceProvider locale="en-us">
<Layout> <ManagedUIContext>
<Component {...pageProps} /> <Layout>
</Layout> <Component {...pageProps} />
</Layout>
</ManagedUIContext>
</CommerceProvider> </CommerceProvider>
</> </>
) )