forked from crowetic/commerce
commit
e29dd243f6
5
.gitignore
vendored
5
.gitignore
vendored
@ -31,4 +31,7 @@ yarn-error.log*
|
|||||||
.env.production.local
|
.env.production.local
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
|
|
||||||
|
# dev
|
||||||
|
framework
|
||||||
|
@ -6,11 +6,12 @@ import React, { FC } from 'react'
|
|||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { Navbar, Footer } from '@components/common'
|
import { Navbar, Footer } from '@components/common'
|
||||||
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
|
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
|
||||||
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
|
||||||
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
|
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
|
||||||
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
|
||||||
import { CartSidebarView } from '@components/cart'
|
import { CartSidebarView } from '@components/cart'
|
||||||
|
|
||||||
|
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
||||||
|
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
||||||
|
|
||||||
const Loading = () => (
|
const Loading = () => (
|
||||||
<div className="w-80 h-80 flex items-center text-center justify-center p-3">
|
<div className="w-80 h-80 flex items-center text-center justify-center p-3">
|
||||||
<LoadingDots />
|
<LoadingDots />
|
||||||
@ -76,7 +77,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
|
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
|
||||||
hide={acceptedCookies}
|
hide={acceptedCookies}
|
||||||
action={
|
action={
|
||||||
<Button className="mx-5" onClick={onAcceptCookies}>
|
<Button className="mx-5" onClick={() => onAcceptCookies()}>
|
||||||
Accept cookies
|
Accept cookies
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
|
@ -9,8 +9,8 @@
|
|||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
& .product-image {
|
& .productImage {
|
||||||
transform: scale(1.05);
|
transform: scale(1.2625);
|
||||||
}
|
}
|
||||||
|
|
||||||
& .productTitle > span,
|
& .productTitle > span,
|
||||||
@ -44,10 +44,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& .product-image {
|
|
||||||
@apply transform transition-transform duration-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(6n + 1) .squareBg {
|
&:nth-child(6n + 1) .squareBg {
|
||||||
@apply bg-violet;
|
@apply bg-violet;
|
||||||
}
|
}
|
||||||
@ -135,7 +131,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.productImage {
|
||||||
object-fit: cover;
|
@apply transform transition-transform duration-500 object-cover scale-120;
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
}
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
import type { FC } from 'react'
|
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
|
|
||||||
import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
|
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
import type { FC } from 'react'
|
||||||
import s from './ProductCard.module.css'
|
import s from './ProductCard.module.css'
|
||||||
import WishlistButton from '@components/wishlist/WishlistButton'
|
import WishlistButton from '@components/wishlist/WishlistButton'
|
||||||
|
|
||||||
|
import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
|
||||||
|
import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
product: ProductNode
|
product: ProductNode
|
||||||
@ -82,7 +83,7 @@ const ProductCard: FC<Props> = ({
|
|||||||
quality="85"
|
quality="85"
|
||||||
src={src}
|
src={src}
|
||||||
alt={p.name}
|
alt={p.name}
|
||||||
className={s.image}
|
className={s.productImage}
|
||||||
width={imgWidth}
|
width={imgWidth}
|
||||||
sizes={imgSizes}
|
sizes={imgSizes}
|
||||||
height={imgHeight}
|
height={imgHeight}
|
||||||
|
@ -27,12 +27,12 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
variant = 'flat',
|
variant = 'flat',
|
||||||
children,
|
children,
|
||||||
active,
|
active,
|
||||||
onClick,
|
|
||||||
width,
|
width,
|
||||||
Component = 'button',
|
|
||||||
loading = false,
|
loading = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
style = {},
|
style = {},
|
||||||
|
Component = 'button',
|
||||||
|
...rest
|
||||||
} = props
|
} = props
|
||||||
const ref = useRef<typeof Component>(null)
|
const ref = useRef<typeof Component>(null)
|
||||||
|
|
||||||
@ -57,6 +57,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
width,
|
width,
|
||||||
...style,
|
...style,
|
||||||
}}
|
}}
|
||||||
|
{...rest}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
{loading && (
|
{loading && (
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
const COOKIE_NAME = 'accept_cookies'
|
const COOKIE_NAME = 'accept_cookies'
|
||||||
|
|
||||||
@ -14,9 +14,7 @@ export const useAcceptCookies = () => {
|
|||||||
|
|
||||||
const acceptCookies = () => {
|
const acceptCookies = () => {
|
||||||
setAcceptedCookies(true)
|
setAcceptedCookies(true)
|
||||||
Cookies.set(COOKIE_NAME, 'accepted', {
|
Cookies.set(COOKIE_NAME, 'accepted', { expires: 365 })
|
||||||
expires: 365,
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -51,6 +51,9 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
lineHeight: {
|
lineHeight: {
|
||||||
'extra-loose': '2.2'
|
'extra-loose': '2.2'
|
||||||
|
},
|
||||||
|
scale: {
|
||||||
|
'120': '1.2',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user