forked from crowetic/commerce
ProductStyling
This commit is contained in:
parent
ae43c92661
commit
5e4d2c2f8f
@ -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
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 />
|
||||||
|
@ -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>
|
||||||
|
)
|
||||||
|
@ -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)
|
||||||
|
@ -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>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user