forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
d92e4de42b
@ -1,8 +1,9 @@
|
|||||||
|
import { ChangeEvent, useEffect, useState } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
import { Trash, Plus, Minus } from '@components/icon'
|
import { Trash, Plus, Minus } from '@components/icon'
|
||||||
import usePrice from '@lib/bigcommerce/use-price'
|
import usePrice from '@lib/bigcommerce/use-price'
|
||||||
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
||||||
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
|
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
|
||||||
import { ChangeEvent, useEffect, useState } from 'react'
|
|
||||||
import s from './CartItem.module.css'
|
import s from './CartItem.module.css'
|
||||||
|
|
||||||
const CartItem = ({
|
const CartItem = ({
|
||||||
@ -56,7 +57,13 @@ const CartItem = ({
|
|||||||
return (
|
return (
|
||||||
<li className="flex flex-row space-x-8 py-6">
|
<li className="flex flex-row space-x-8 py-6">
|
||||||
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
||||||
<img className={s.productImage} src={item.image_url} />
|
<Image
|
||||||
|
src={item.image_url}
|
||||||
|
width={60}
|
||||||
|
height={60}
|
||||||
|
// The cart item image is already optimized and very small in size
|
||||||
|
unoptimized
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 flex flex-col justify-between text-base">
|
<div className="flex-1 flex flex-col justify-between text-base">
|
||||||
<span className="font-bold mb-3">{item.name}</span>
|
<span className="font-bold mb-3">{item.name}</span>
|
||||||
|
3
components/core/Featurebar/Featurebar.module.css
Normal file
3
components/core/Featurebar/Featurebar.module.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.root {
|
||||||
|
@apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
|
||||||
|
}
|
@ -1,6 +1,8 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
|
|
||||||
|
import s from './Featurebar.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
title: string
|
title: string
|
||||||
@ -17,8 +19,10 @@ const Featurebar: FC<Props> = ({
|
|||||||
hide,
|
hide,
|
||||||
}) => {
|
}) => {
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
|
s.root,
|
||||||
{ 'translate-y-full': hide },
|
{
|
||||||
|
'transition-transform transform duration-500 ease-out translate-y-full': hide,
|
||||||
|
},
|
||||||
className
|
className
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
|
||||||
import getSlug from '@utils/get-slug'
|
import getSlug from '@utils/get-slug'
|
||||||
|
import { Github } from '@components/icon'
|
||||||
import { Logo, Container } from '@components/ui'
|
import { Logo, Container } from '@components/ui'
|
||||||
import { Github, DoubleChevron } from '@components/icon'
|
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
|
import { I18nWidget } from '@components/core'
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
@ -82,13 +82,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
<div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
|
<div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
|
||||||
<div className="flex space-x-6 items-center h-10">
|
<div className="flex space-x-6 items-center h-10">
|
||||||
<Github />
|
<Github />
|
||||||
<div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center">
|
<I18nWidget />
|
||||||
<img className="" src="/flag-us.png" />
|
|
||||||
<span>English</span>
|
|
||||||
<span className="">
|
|
||||||
<DoubleChevron />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
23
components/core/I18nWidget/I18nWidget.module.css
Normal file
23
components/core/I18nWidget/I18nWidget.module.css
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.root {
|
||||||
|
@apply relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdownMenu {
|
||||||
|
@apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
@apply absolute border border-accents-1 shadow-lg w-56 h-auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
@apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item.active {
|
||||||
|
}
|
38
components/core/I18nWidget/I18nWidget.tsx
Normal file
38
components/core/I18nWidget/I18nWidget.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import s from './I18nWidget.module.css'
|
||||||
|
import { Menu } from '@headlessui/react'
|
||||||
|
import { DoubleChevron } from '@components/icon'
|
||||||
|
import cn from 'classnames'
|
||||||
|
|
||||||
|
const I18nWidget: FC = () => {
|
||||||
|
return (
|
||||||
|
<nav className={s.root}>
|
||||||
|
<Menu>
|
||||||
|
<Menu.Button className={s.button}>
|
||||||
|
<img className="" src="/flag-us.png" />
|
||||||
|
<span>English</span>
|
||||||
|
<span className="">
|
||||||
|
<DoubleChevron />
|
||||||
|
</span>
|
||||||
|
</Menu.Button>
|
||||||
|
<Menu.Items className={s.dropdownMenu}>
|
||||||
|
<Menu.Item>
|
||||||
|
{({ active }) => (
|
||||||
|
<a
|
||||||
|
className={cn(s.item, { [s.active]: active })}
|
||||||
|
href="#"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu.Items>
|
||||||
|
</Menu>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default I18nWidget
|
1
components/core/I18nWidget/index.ts
Normal file
1
components/core/I18nWidget/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './I18nWidget'
|
@ -8,3 +8,4 @@ export { default as UserNav } from './UserNav'
|
|||||||
export { default as Toggle } from './Toggle'
|
export { default as Toggle } from './Toggle'
|
||||||
export { default as Head } from './Head'
|
export { default as Head } from './Head'
|
||||||
export { default as HTMLContent } from './HTMLContent'
|
export { default as HTMLContent } from './HTMLContent'
|
||||||
|
export { default as I18nWidget } from './I18nWidget'
|
||||||
|
@ -11,9 +11,9 @@ const DoubleChevron = ({ ...props }) => {
|
|||||||
<path
|
<path
|
||||||
d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
|
d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
@ -5,11 +5,11 @@ const Moon = ({ ...props }) => {
|
|||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
fill="none"
|
fill="none"
|
||||||
shape-rendering="geometricPrecision"
|
shapeRendering="geometricPrecision"
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
||||||
|
@ -11,16 +11,16 @@ const RightArrow = ({ ...props }) => {
|
|||||||
<path
|
<path
|
||||||
d="M5 12H19"
|
d="M5 12H19"
|
||||||
stroke="white"
|
stroke="white"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M12 5L19 12L12 19"
|
d="M12 5L19 12L12 19"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
@ -5,11 +5,11 @@ const Sun = ({ ...props }) => {
|
|||||||
width="24"
|
width="24"
|
||||||
height="24"
|
height="24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="1.5"
|
strokeWidth="1.5"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
fill="none"
|
fill="none"
|
||||||
shape-rendering="geometricPrecision"
|
shapeRendering="geometricPrecision"
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<circle cx="12" cy="12" r="5" />
|
<circle cx="12" cy="12" r="5" />
|
||||||
|
@ -86,9 +86,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& .productTitle {
|
& .productTitle {
|
||||||
width: 18vw;
|
|
||||||
margin-top: -7px;
|
margin-top: -7px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
& span {
|
||||||
|
line-height: 3;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& .productPrice {
|
& .productPrice {
|
||||||
@ -97,13 +99,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.productTitle {
|
.productTitle {
|
||||||
@apply pt-4 leading-8;
|
@apply pt-2 max-w-full w-full;
|
||||||
width: 400px;
|
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
letter-spacing: 0.4px;
|
letter-spacing: 0.4px;
|
||||||
|
|
||||||
& span {
|
& span {
|
||||||
@apply inline p-4 bg-primary text-primary font-bold;
|
@apply py-4 px-6 bg-primary text-primary font-bold;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
letter-spacing: inherit;
|
letter-spacing: inherit;
|
||||||
box-decoration-break: clone;
|
box-decoration-break: clone;
|
||||||
@ -112,10 +113,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.productPrice {
|
.productPrice {
|
||||||
@apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
|
@apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
|
||||||
letter-spacing: 0.4px;
|
letter-spacing: 0.4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wishlistButton {
|
.wishlistButton {
|
||||||
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
|
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imageContainer {
|
||||||
|
@apply absolute z-10 inset-0 flex items-center justify-center;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
@apply h-full;
|
||||||
|
& > div {
|
||||||
|
@apply h-full;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,30 +1,46 @@
|
|||||||
import cn from 'classnames'
|
|
||||||
import s from './ProductCard.module.css'
|
|
||||||
import { FC, ReactNode, Component } from 'react'
|
import { FC, ReactNode, Component } from 'react'
|
||||||
|
import cn from 'classnames'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Link from 'next/link'
|
||||||
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
|
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
|
||||||
import { Heart } from '@components/icon'
|
import { Heart } from '@components/icon'
|
||||||
import Link from 'next/link'
|
import s from './ProductCard.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: ReactNode[] | Component[] | any[]
|
children?: ReactNode[] | Component[] | any[]
|
||||||
product: ProductNode
|
product: ProductNode
|
||||||
variant?: 'slim' | 'simple'
|
variant?: 'slim' | 'simple'
|
||||||
|
imgWidth: number
|
||||||
|
imgHeight: number
|
||||||
|
priority?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
|
const ProductCard: FC<Props> = ({
|
||||||
|
className,
|
||||||
|
product: p,
|
||||||
|
variant,
|
||||||
|
imgWidth,
|
||||||
|
imgHeight,
|
||||||
|
priority,
|
||||||
|
}) => {
|
||||||
|
const src = p.images.edges?.[0]?.node.urlOriginal!
|
||||||
|
|
||||||
if (variant === 'slim') {
|
if (variant === 'slim') {
|
||||||
return (
|
return (
|
||||||
<div className="relative overflow-hidden box-border">
|
<div className="relative overflow-hidden box-border">
|
||||||
<img
|
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
|
||||||
className="object-scale-down h-48"
|
|
||||||
src={p.images.edges?.[0]?.node.urlSmall}
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 flex items-center justify-end mr-8">
|
|
||||||
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
|
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
|
||||||
{p.name}
|
{p.name}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<Image
|
||||||
|
src={src}
|
||||||
|
width={imgWidth}
|
||||||
|
height={imgHeight}
|
||||||
|
priority={priority}
|
||||||
|
quality="90"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -34,15 +50,9 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
|
|||||||
<a
|
<a
|
||||||
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
|
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
|
||||||
>
|
>
|
||||||
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
|
||||||
<img
|
|
||||||
className={cn('w-full object-cover', s['product-image'])}
|
|
||||||
src={p.images.edges?.[0]?.node.urlXL}
|
|
||||||
/>
|
|
||||||
</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-20 absolute">
|
||||||
<div className="absolute top-0 left-0">
|
<div className="absolute top-0 left-0 pr-16 max-w-full">
|
||||||
<h3 className={s.productTitle}>
|
<h3 className={s.productTitle}>
|
||||||
<span>{p.name}</span>
|
<span>{p.name}</span>
|
||||||
</h3>
|
</h3>
|
||||||
@ -52,6 +62,16 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
|
|||||||
<Heart />
|
<Heart />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={cn(s.imageContainer)}>
|
||||||
|
<Image
|
||||||
|
className={cn('w-full object-cover', s['product-image'])}
|
||||||
|
src={src}
|
||||||
|
width={imgWidth}
|
||||||
|
height={imgHeight}
|
||||||
|
priority={priority}
|
||||||
|
quality="90"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
|
|
||||||
.positionIndicatorsContainer {
|
.positionIndicatorsContainer {
|
||||||
@apply hidden;
|
@apply hidden;
|
||||||
|
|
||||||
@screen sm {
|
@screen sm {
|
||||||
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
|
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
|
||||||
}
|
}
|
||||||
@ -35,14 +36,6 @@
|
|||||||
|
|
||||||
.positionIndicator {
|
.positionIndicator {
|
||||||
@apply rounded-full p-2;
|
@apply rounded-full p-2;
|
||||||
|
|
||||||
/* :hover .dot {
|
|
||||||
@apply bg-hover-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
:focus .dot {
|
|
||||||
@apply outline-none;
|
|
||||||
} */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { useKeenSlider } from 'keen-slider/react'
|
import { useKeenSlider } from 'keen-slider/react'
|
||||||
import Image from 'next/image'
|
|
||||||
import React, { Children, FC, isValidElement, useState } from 'react'
|
import React, { Children, FC, isValidElement, useState } from 'react'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
|
|
||||||
|
@ -8,15 +8,15 @@
|
|||||||
|
|
||||||
.productDisplay {
|
.productDisplay {
|
||||||
@apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
|
@apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
|
||||||
margin-right: -2rem;
|
min-height: 600px;
|
||||||
margin-left: -2rem;
|
|
||||||
min-height: 400px;
|
|
||||||
|
|
||||||
@screen md {
|
@screen md {
|
||||||
min-height: 700px;
|
min-height: 700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
|
margin-right: -2rem;
|
||||||
|
margin-left: -2rem;
|
||||||
@apply mx-0 col-span-6;
|
@apply mx-0 col-span-6;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -28,7 +28,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nameBox {
|
.nameBox {
|
||||||
@apply absolute top-6 left-6 z-20;
|
@apply absolute top-6 left-0 z-20 pr-16;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
@apply left-6 pr-16;
|
||||||
|
}
|
||||||
|
|
||||||
& .name {
|
& .name {
|
||||||
@apply px-6 py-2 bg-primary text-primary font-bold;
|
@apply px-6 py-2 bg-primary text-primary font-bold;
|
||||||
@ -43,16 +47,16 @@
|
|||||||
@screen lg {
|
@screen lg {
|
||||||
& .name,
|
& .name,
|
||||||
& .price {
|
& .price {
|
||||||
@apply bg-hover-1 text-white;
|
@apply bg-violet-light text-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
|
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
@apply col-span-5 pl-12 pt-20;
|
@apply col-span-6 pt-20;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,6 +64,15 @@
|
|||||||
@apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
|
@apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imageContainer {
|
||||||
|
& > div {
|
||||||
|
@apply h-full;
|
||||||
|
& > div {
|
||||||
|
@apply h-full;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
@apply w-full h-auto max-h-full object-cover;
|
@apply w-full h-auto max-h-full object-cover;
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,17 @@
|
|||||||
import cn from 'classnames'
|
|
||||||
import { NextSeo } from 'next-seo'
|
|
||||||
import s from './ProductView.module.css'
|
|
||||||
import { FC, useState } from 'react'
|
import { FC, useState } from 'react'
|
||||||
|
import cn from 'classnames'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { NextSeo } from 'next-seo'
|
||||||
|
|
||||||
|
import s from './ProductView.module.css'
|
||||||
|
import { Heart } from '@components/icon'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { Button, Container } from '@components/ui'
|
import { Button, Container } from '@components/ui'
|
||||||
import { Swatch, ProductSlider } from '@components/product'
|
import { Swatch, ProductSlider } from '@components/product'
|
||||||
|
|
||||||
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||||
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
|
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
|
||||||
import { getProductOptions } from '../helpers'
|
import { getProductOptions } from '../helpers'
|
||||||
import { Heart } from '@components/icon'
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
@ -52,7 +55,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
description: product.description,
|
description: product.description,
|
||||||
images: [
|
images: [
|
||||||
{
|
{
|
||||||
url: product.images.edges?.[0]?.node.urlXL || '',
|
url: product.images.edges?.[0]?.node.urlOriginal!,
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
alt: product.name,
|
alt: product.name,
|
||||||
@ -73,14 +76,17 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
|
|
||||||
<div className={s.sliderContainer}>
|
<div className={s.sliderContainer}>
|
||||||
<ProductSlider>
|
<ProductSlider>
|
||||||
{/** TODO: Change with Image Component **/}
|
|
||||||
{product.images.edges?.map((image, i) => (
|
{product.images.edges?.map((image, i) => (
|
||||||
<img
|
<div key={image?.node.urlXL} className={s.imageContainer}>
|
||||||
key={image?.node.urlSmall}
|
<Image
|
||||||
className={s.img}
|
className={s.img}
|
||||||
src={image?.node.urlXL}
|
src={image?.node.urlXL!}
|
||||||
loading={i === 0 ? 'eager' : 'lazy'}
|
width={1050}
|
||||||
/>
|
height={1050}
|
||||||
|
priority={i === 0}
|
||||||
|
quality="90"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</ProductSlider>
|
</ProductSlider>
|
||||||
</div>
|
</div>
|
||||||
@ -92,12 +98,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
<div className="pb-4" key={opt.displayName}>
|
<div className="pb-4" key={opt.displayName}>
|
||||||
<h2 className="uppercase font-medium">{opt.displayName}</h2>
|
<h2 className="uppercase font-medium">{opt.displayName}</h2>
|
||||||
<div className="flex flex-row py-4">
|
<div className="flex flex-row py-4">
|
||||||
{opt.values.map((v: any) => {
|
{opt.values.map((v: any, i: number) => {
|
||||||
const active = choices[opt.displayName]
|
const active = choices[opt.displayName]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Swatch
|
<Swatch
|
||||||
key={v.entityId}
|
key={`${v.entityId}-${i}`}
|
||||||
active={v.label === active}
|
active={v.label === active}
|
||||||
variant={opt.displayName}
|
variant={opt.displayName}
|
||||||
color={v.hexColors ? v.hexColors[0] : ''}
|
color={v.hexColors ? v.hexColors[0] : ''}
|
||||||
|
@ -9,7 +9,9 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
|
const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
|
||||||
const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
|
const rootClassName = cn(className, {
|
||||||
|
'mx-auto max-w-8xl px-6': !clean,
|
||||||
|
})
|
||||||
|
|
||||||
let Component: React.ComponentType<React.HTMLAttributes<
|
let Component: React.ComponentType<React.HTMLAttributes<
|
||||||
HTMLDivElement
|
HTMLDivElement
|
||||||
|
6
components/ui/Hero/Hero.module.css
Normal file
6
components/ui/Hero/Hero.module.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.root {
|
||||||
|
@apply mx-auto grid grid-cols-1 py-32 gap-4;
|
||||||
|
@screen md {
|
||||||
|
@apply grid-cols-2;
|
||||||
|
}
|
||||||
|
}
|
@ -1,6 +1,8 @@
|
|||||||
import React, { FC } from 'react'
|
import React, { FC } from 'react'
|
||||||
import { Container } from '@components/ui'
|
import { Container } from '@components/ui'
|
||||||
import { RightArrow } from '@components/icon'
|
import { RightArrow } from '@components/icon'
|
||||||
|
import s from './Hero.module.css'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
headline: string
|
headline: string
|
||||||
@ -9,20 +11,24 @@ interface Props {
|
|||||||
|
|
||||||
const Hero: FC<Props> = ({ headline, description }) => {
|
const Hero: FC<Props> = ({ headline, description }) => {
|
||||||
return (
|
return (
|
||||||
<Container>
|
<div className="bg-black">
|
||||||
<div className="mx-auto grid grid-cols-2 bg-black py-32">
|
<Container>
|
||||||
<h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
|
<div className={s.root}>
|
||||||
{headline}
|
<h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
|
||||||
</h2>
|
{headline}
|
||||||
<div className="flex flex-col justify-between">
|
</h2>
|
||||||
<p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
|
<div className="flex flex-col justify-between">
|
||||||
<a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
|
<p className="mt-5 text-xl leading-7 text-accent-2 text-white">
|
||||||
<span>Read it here</span>
|
{description}
|
||||||
<RightArrow width="20" heigh="20" className="ml-1" />
|
</p>
|
||||||
</a>
|
<a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
|
||||||
|
<span>Read it here</span>
|
||||||
|
<RightArrow width="20" heigh="20" className="ml-1" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Container>
|
||||||
</Container>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,7 +49,7 @@ export function extendHook(
|
|||||||
['brandId', input.brandId],
|
['brandId', input.brandId],
|
||||||
['sort', input.sort],
|
['sort', input.sort],
|
||||||
],
|
],
|
||||||
customFetcher,
|
customFetcher as any,
|
||||||
{ revalidateOnFocus: false, ...swrOptions }
|
{ revalidateOnFocus: false, ...swrOptions }
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -1,4 +1,8 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
|
images: {
|
||||||
|
sizes: [320, 480, 820, 1200, 1600],
|
||||||
|
domains: ['cdn11.bigcommerce.com'],
|
||||||
|
},
|
||||||
rewrites() {
|
rewrites() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
"keen-slider": "^5.2.4",
|
"keen-slider": "^5.2.4",
|
||||||
"lodash.debounce": "^4.0.8",
|
"lodash.debounce": "^4.0.8",
|
||||||
"lodash.random": "^3.2.0",
|
"lodash.random": "^3.2.0",
|
||||||
"next": "^9.5.6-canary.9",
|
"next": "^9.5.6-canary.12",
|
||||||
"next-seo": "^4.11.0",
|
"next-seo": "^4.11.0",
|
||||||
"next-themes": "^0.0.4",
|
"next-themes": "^0.0.4",
|
||||||
"nextjs-progressbar": "^0.0.6",
|
"nextjs-progressbar": "^0.0.6",
|
||||||
|
@ -65,13 +65,26 @@ export default function Home({
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Grid>
|
<Grid>
|
||||||
{featured.slice(0, 3).map(({ node }) => (
|
{featured.slice(0, 3).map(({ node }, i) => (
|
||||||
<ProductCard key={node.path} product={node} />
|
<ProductCard
|
||||||
|
key={node.path}
|
||||||
|
product={node}
|
||||||
|
// The first image is the largest one in the grid
|
||||||
|
imgWidth={i === 0 ? 1600 : 820}
|
||||||
|
imgHeight={i === 0 ? 1600 : 820}
|
||||||
|
priority
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
<Marquee variant="secondary">
|
<Marquee variant="secondary">
|
||||||
{bestSelling.slice(3, 6).map(({ node }) => (
|
{bestSelling.slice(0, 3).map(({ node }) => (
|
||||||
<ProductCard key={node.path} product={node} variant="slim" />
|
<ProductCard
|
||||||
|
key={node.path}
|
||||||
|
product={node}
|
||||||
|
variant="slim"
|
||||||
|
imgWidth={320}
|
||||||
|
imgHeight={320}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
<Hero
|
<Hero
|
||||||
@ -85,16 +98,28 @@ export default function Home({
|
|||||||
‘Natural’."
|
‘Natural’."
|
||||||
/>
|
/>
|
||||||
<Grid layout="B">
|
<Grid layout="B">
|
||||||
{featured.slice(3, 6).map(({ node }) => (
|
{featured.slice(3, 6).map(({ node }, i) => (
|
||||||
<ProductCard key={node.path} product={node} />
|
<ProductCard
|
||||||
|
key={node.path}
|
||||||
|
product={node}
|
||||||
|
// The second image is the largest one in the grid
|
||||||
|
imgWidth={i === 1 ? 1600 : 820}
|
||||||
|
imgHeight={i === 1 ? 1600 : 820}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
<Marquee>
|
<Marquee>
|
||||||
{bestSelling.slice(3, 6).map(({ node }) => (
|
{bestSelling.slice(3, 6).map(({ node }) => (
|
||||||
<ProductCard key={node.path} product={node} variant="slim" />
|
<ProductCard
|
||||||
|
key={node.path}
|
||||||
|
product={node}
|
||||||
|
variant="slim"
|
||||||
|
imgWidth={320}
|
||||||
|
imgHeight={320}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
<div className="py-12 flex flex-row w-full px-12">
|
<div className="py-12 flex flex-row w-full px-6">
|
||||||
<div className="pr-3 w-48 relative">
|
<div className="pr-3 w-48 relative">
|
||||||
<div className="sticky top-32">
|
<div className="sticky top-32">
|
||||||
<ul className="mb-10">
|
<ul className="mb-10">
|
||||||
@ -122,7 +147,13 @@ export default function Home({
|
|||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<Grid layout="normal">
|
<Grid layout="normal">
|
||||||
{newestProducts.map(({ node }) => (
|
{newestProducts.map(({ node }) => (
|
||||||
<ProductCard key={node.path} product={node} variant="simple" />
|
<ProductCard
|
||||||
|
key={node.path}
|
||||||
|
product={node}
|
||||||
|
variant="simple"
|
||||||
|
imgWidth={480}
|
||||||
|
imgHeight={480}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
</div>
|
</div>
|
||||||
|
@ -147,6 +147,8 @@ export default function Search({
|
|||||||
key={node.path}
|
key={node.path}
|
||||||
className="animate__animated animate__fadeIn"
|
className="animate__animated animate__fadeIn"
|
||||||
product={node}
|
product={node}
|
||||||
|
imgWidth={480}
|
||||||
|
imgHeight={480}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user