+
+
+ {/** TODO: Replace this. No `path` found at Cart */}
+
+
+ {item.name}
+
+
+
+
+
+
+
+
+
+
+ {price}
+
+
+
+
+
+
+ {isEmpty ? (
+
+ )
+}
+
+export default CartSidebarView
diff --git a/components/cart/CartSidebarView/index.ts b/components/cart/CartSidebarView/index.ts
new file mode 100644
index 0000000..0262e44
--- /dev/null
+++ b/components/cart/CartSidebarView/index.ts
@@ -0,0 +1 @@
+export { default } from './CartSidebarView'
diff --git a/components/cart/index.ts b/components/cart/index.ts
new file mode 100644
index 0000000..3e53fa3
--- /dev/null
+++ b/components/cart/index.ts
@@ -0,0 +1,2 @@
+export { default as CartSidebarView } from './CartSidebarView'
+export { default as CartItem } from './CartItem'
diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
new file mode 100644
index 0000000..b7928d4
--- /dev/null
+++ b/components/core/Avatar/Avatar.tsx
@@ -0,0 +1,25 @@
+import cn from 'classnames'
+import { FC, useState } from 'react'
+import { getRandomPairOfColors } from '@lib/colors'
+
+interface Props {
+ className?: string
+ children?: any
+}
+
+const Avatar: FC
+
+
+
+
+
+
+
+
+
+ ) : error ? (
+ + Your cart is empty +
++ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +
+
+
+
+ ) : success ? (
+ + We couldn’t process the purchase. Please check your card information + and try again. +
+
+
+
+ ) : (
+ <>
+ + Thank you for your order. +
+
+
+
+ + My Cart +
+-
+ {items.map((item) => (
+
+
+
+ )}
+
+
+
+ -
+
- + Subtotal + {subTotal} + +
- + Taxes + Calculated at checkout + +
- + Estimated Shipping + FREE + +
+ Total
+ {total}
+
+
+ {/* Add an image - We're generating a gradient as placeholder ![]()
*/}
+
+ )
+}
+
+export default Avatar
diff --git a/components/core/Avatar/index.ts b/components/core/Avatar/index.ts
new file mode 100644
index 0000000..a4600ec
--- /dev/null
+++ b/components/core/Avatar/index.ts
@@ -0,0 +1 @@
+export { default } from './Avatar'
diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx
new file mode 100644
index 0000000..3ff9722
--- /dev/null
+++ b/components/core/EnhancedImage/EnhancedImage.tsx
@@ -0,0 +1,42 @@
+import { FC } from 'react'
+import { useInView } from 'react-intersection-observer'
+import Image from 'next/image'
+
+type Props = Omit<
+ JSX.IntrinsicElements['img'],
+ 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
+> & {
+ src: string
+ quality?: string
+ priority?: boolean
+ loading?: readonly ['lazy', 'eager', undefined]
+ unoptimized?: boolean
+} & (
+ | {
+ width: number | string
+ height: number | string
+ unsized?: false
+ }
+ | {
+ width?: number | string
+ height?: number | string
+ unsized: true
+ }
+ )
+
+const EnhancedImage: FC
+
+ )
+}
+
+export default EnhancedImage
diff --git a/components/core/EnhancedImage/index.ts b/components/core/EnhancedImage/index.ts
new file mode 100644
index 0000000..48dbd60
--- /dev/null
+++ b/components/core/EnhancedImage/index.ts
@@ -0,0 +1 @@
+export { default } from './EnhancedImage'
diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
new file mode 100644
index 0000000..af5b495
--- /dev/null
+++ b/components/core/Featurebar/Featurebar.module.css
@@ -0,0 +1,7 @@
+.root {
+ @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+
+ @screen md {
+ @apply flex text-left;
+ }
+}
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
new file mode 100644
index 0000000..a243590
--- /dev/null
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -0,0 +1,39 @@
+import cn from 'classnames'
+import { FC } from 'react'
+
+import s from './Featurebar.module.css'
+
+interface Props {
+ className?: string
+ title: string
+ description?: string
+ hide?: boolean
+ action?: React.ReactNode
+}
+
+const Featurebar: FC
+ {title}
+
+ {description}
+
+ {action && action}
+
+ )
+}
+
+export default Featurebar
diff --git a/components/core/Featurebar/index.ts b/components/core/Featurebar/index.ts
new file mode 100644
index 0000000..44f5169
--- /dev/null
+++ b/components/core/Featurebar/index.ts
@@ -0,0 +1 @@
+export { default } from './Featurebar'
diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css
new file mode 100644
index 0000000..259318e
--- /dev/null
+++ b/components/core/Footer/Footer.module.css
@@ -0,0 +1,9 @@
+.link {
+ & > svg {
+ @apply transform duration-75 ease-linear;
+ }
+
+ &:hover > svg {
+ @apply scale-110;
+ }
+}
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
new file mode 100644
index 0000000..2de87ac
--- /dev/null
+++ b/components/core/Footer/Footer.tsx
@@ -0,0 +1,150 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import getSlug from '@lib/get-slug'
+import { Github } from '@components/icons'
+import { Logo, Container } from '@components/ui'
+import { I18nWidget } from '@components/core'
+import s from './Footer.module.css'
+
+interface Props {
+ className?: string
+ children?: any
+ pages?: Page[]
+}
+
+const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
+
+const Footer: FC
+
+ )
+}
+
+export default Head
diff --git a/components/core/HomeAllProductsGrid/index.ts b/components/core/HomeAllProductsGrid/index.ts
new file mode 100644
index 0000000..31d313d
--- /dev/null
+++ b/components/core/HomeAllProductsGrid/index.ts
@@ -0,0 +1 @@
+export { default } from './HomeAllProductsGrid'
diff --git a/components/core/I18nWidget/I18nWidget.module.css b/components/core/I18nWidget/I18nWidget.module.css
new file mode 100644
index 0000000..6e88835
--- /dev/null
+++ b/components/core/I18nWidget/I18nWidget.module.css
@@ -0,0 +1,28 @@
+.root {
+ @apply relative;
+}
+
+.button {
+ @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
+}
+
+.button:focus {
+ @apply outline-none;
+}
+
+.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 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
+ text-transform: capitalize;
+}
+
+.item:hover {
+ @apply bg-accents-1;
+}
diff --git a/components/core/I18nWidget/I18nWidget.tsx b/components/core/I18nWidget/I18nWidget.tsx
new file mode 100644
index 0000000..428f7bc
--- /dev/null
+++ b/components/core/I18nWidget/I18nWidget.tsx
@@ -0,0 +1,82 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { Menu } from '@headlessui/react'
+import { DoubleChevron } from '@components/icons'
+import s from './I18nWidget.module.css'
+
+interface LOCALE_DATA {
+ name: string
+ img: {
+ filename: string
+ alt: string
+ }
+}
+
+const LOCALES_MAP: Record
+
+
+
+ -
+
- + + All Categories + + + {categories.map((cat: any) => ( +
- + + {cat.name} + + + ))} +
-
+
- + + All Designers + + + {brands.flatMap(({ node }: any) => ( +
- + + {node.name} + + + ))} +
+
+ {newestProducts.map(({ node }: any) => (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ {modalView === 'LOGIN_VIEW' &&
+ setAcceptedCookies(true)}>
+ Accept cookies
+
+ }
+ />
+ {/*
+ {toastText}
+ */}
+
+
+
+
+
+ )
+}
+
+export default Navbar
diff --git a/components/core/Navbar/index.ts b/components/core/Navbar/index.ts
new file mode 100644
index 0000000..e6400ae
--- /dev/null
+++ b/components/core/Navbar/index.ts
@@ -0,0 +1 @@
+export { default } from './Navbar'
diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css
new file mode 100644
index 0000000..edfdeb5
--- /dev/null
+++ b/components/core/Searchbar/Searchbar.module.css
@@ -0,0 +1,16 @@
+.input {
+ @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
+ min-width: 300px;
+}
+
+.input:focus {
+ @apply outline-none shadow-outline-2;
+}
+
+.iconContainer {
+ @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
+}
+
+.icon {
+ @apply h-5 w-5;
+}
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
new file mode 100644
index 0000000..d598eba
--- /dev/null
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -0,0 +1,62 @@
+import { FC, useEffect } from 'react'
+import cn from 'classnames'
+import s from './Searchbar.module.css'
+import { useRouter } from 'next/router'
+
+interface Props {
+ className?: string
+ id?: string
+}
+
+const Searchbar: FC
+
+
+
+
+ )
+}
+
+export default Searchbar
diff --git a/components/core/Searchbar/index.ts b/components/core/Searchbar/index.ts
new file mode 100644
index 0000000..e6c0e36
--- /dev/null
+++ b/components/core/Searchbar/index.ts
@@ -0,0 +1 @@
+export { default } from './Searchbar'
diff --git a/components/core/Toggle/Toggle.module.css b/components/core/Toggle/Toggle.module.css
new file mode 100644
index 0000000..c3a2af6
--- /dev/null
+++ b/components/core/Toggle/Toggle.module.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx
new file mode 100644
index 0000000..9bf6001
--- /dev/null
+++ b/components/core/Toggle/Toggle.tsx
@@ -0,0 +1,55 @@
+import React, { FC } from 'react'
+import { Switch } from '@headlessui/react'
+import { Moon, Sun } from '@components/icons'
+interface Props {
+ className?: string
+ checked: boolean
+ onChange: any
+}
+
+const Toggle: FC
+
+
+
+
+
+ {name}
+
+
+
+
+ Theme: {theme}{' '}
+
+
+ {theme == 'dark' ? (
+
+
+
+
+ ) : (
+ <>
+
+
+
+ {p.name}
+
+
+
+
+
+
+ + {p.name} +
+ {price} +
+
+
+ )}
+
+
+ )
+}
+
+export default ProductCard
diff --git a/components/product/ProductCard/index.ts b/components/product/ProductCard/index.ts
new file mode 100644
index 0000000..4559faa
--- /dev/null
+++ b/components/product/ProductCard/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductCard'
diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
new file mode 100644
index 0000000..5ad48cc
--- /dev/null
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -0,0 +1,82 @@
+.root {
+ @apply relative w-full h-full;
+ overflow-y: hidden;
+}
+
+.leftControl,
+.rightControl {
+ @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+ @apply bg-hover-2;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+ @apply outline-none shadow-outline-blue;
+}
+
+.leftControl {
+ @apply bg-cover left-10;
+ background-image: url('public/cursor-left.png');
+
+ @screen md {
+ @apply left-6;
+ }
+}
+
+.rightControl {
+ @apply bg-cover right-10;
+ background-image: url('public/cursor-right.png');
+
+ @screen md {
+ @apply right-6;
+ }
+}
+
+.control {
+ @apply opacity-0 transition duration-150;
+}
+
+.root:hover .control {
+ @apply opacity-100;
+}
+
+.positionIndicatorsContainer {
+ @apply hidden;
+
+ @screen sm {
+ @apply block absolute bottom-6 left-1/2;
+ transform: translateX(-50%);
+ }
+}
+
+.positionIndicator {
+ @apply rounded-full p-2;
+}
+
+.dot {
+ @apply bg-hover-1 transition w-3 h-3 rounded-full;
+}
+
+.positionIndicator:hover .dot {
+ @apply bg-hover-2;
+}
+
+.positionIndicator:focus {
+ @apply outline-none;
+}
+
+.positionIndicator:focus .dot {
+ @apply shadow-outline-blue;
+}
+
+.positionIndicatorActive .dot {
+ @apply bg-white;
+}
+
+.positionIndicatorActive:hover .dot {
+ @apply bg-white;
+}
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
new file mode 100644
index 0000000..6a8b778
--- /dev/null
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -0,0 +1,77 @@
+import { useKeenSlider } from 'keen-slider/react'
+import React, { Children, FC, isValidElement, useState } from 'react'
+import cn from 'classnames'
+
+import s from './ProductSlider.module.css'
+
+const ProductSlider: FC = ({ children }) => {
+ const [currentSlide, setCurrentSlide] = useState(0)
+ const [isMounted, setIsMounted] = useState(false)
+
+ const [ref, slider] = useKeenSlider
+
+
+
+ )
+}
+
+export default ProductSlider
diff --git a/components/product/ProductSlider/index.ts b/components/product/ProductSlider/index.ts
new file mode 100644
index 0000000..5044404
--- /dev/null
+++ b/components/product/ProductSlider/index.ts
@@ -0,0 +1 @@
+export { default } from './ProductSlider'
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
new file mode 100644
index 0000000..ddcb426
--- /dev/null
+++ b/components/product/ProductView/ProductView.module.css
@@ -0,0 +1,91 @@
+.root {
+ @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
+
+ @screen lg {
+ @apply grid-cols-12;
+ }
+}
+
+.productDisplay {
+ @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
+ min-height: 600px;
+
+ @screen md {
+ min-height: 700px;
+ }
+
+ @screen lg {
+ margin-right: -2rem;
+ margin-left: -2rem;
+ @apply mx-0 col-span-6;
+ min-height: 100%;
+ height: 100%;
+ }
+}
+
+.squareBg {
+ @apply absolute inset-0 bg-violet z-0 h-full;
+}
+
+.nameBox {
+ @apply absolute top-6 left-0 z-20 pr-16;
+
+ @screen lg {
+ @apply left-6 pr-16;
+ }
+
+ & .name {
+ @apply px-6 py-2 bg-primary text-primary font-bold;
+ font-size: 2rem;
+ letter-spacing: 0.4px;
+ }
+
+ & .price {
+ @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
+ }
+
+ @screen lg {
+ & .name,
+ & .price {
+ @apply bg-violet-light text-white;
+ }
+ }
+}
+
+.sidebar {
+ @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
+
+ @screen lg {
+ @apply col-span-6 py-24 justify-between;
+ }
+}
+
+.sliderContainer {
+ @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
+}
+
+.imageContainer {
+ & > div {
+ @apply h-full;
+ & > div {
+ @apply h-full;
+ }
+ }
+}
+
+.img {
+ @apply w-full h-auto max-h-full object-cover;
+}
+
+.button {
+ min-width: 300px;
+ text-align: center;
+}
+
+.wishlistButton {
+ @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+
+ @screen lg {
+ @apply right-12 text-white bg-violet;
+ }
+}
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
new file mode 100644
index 0000000..57df704
--- /dev/null
+++ b/components/product/ProductView/ProductView.tsx
@@ -0,0 +1,161 @@
+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 { useUI } from '@components/ui/context'
+import { Swatch, ProductSlider } from '@components/product'
+import { Button, Container } from '@components/ui'
+import { HTMLContent } from '@components/core'
+
+import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
+import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
+import {
+ getCurrentVariant,
+ getProductOptions,
+ SelectedOptions,
+} from '../helpers'
+import WishlistButton from '@components/wishlist/WishlistButton'
+
+interface Props {
+ className?: string
+ children?: any
+ product: ProductNode
+}
+
+const ProductView: FC
+ {Children.map(children, (child) => {
+ // Add the keen-slider__slide className to children
+ if (isValidElement(child)) {
+ return {
+ ...child,
+ props: {
+ ...child.props,
+ className: `${
+ child.props.className ? `${child.props.className} ` : ''
+ }keen-slider__slide`,
+ },
+ }
+ }
+ return child
+ })}
+
+ {slider && (
+
+ {[...Array(slider.details().size).keys()].map((idx) => {
+ return (
+
+ )
+ })}
+
+ )}
+
+
+
+
+
+
+
+
+ {product.name}
+
+ {product.prices?.price.value}
+ {` `}
+ {product.prices?.price.currencyCode}
+
+
+
+ {product.images.edges?.map((image, i) => (
+
+
+
+
+ ))}
+
+
+ {options?.map((opt: any) => (
+
+
+
+
+
+ ))}
+
+ {opt.displayName}
+
+ {opt.values.map((v: any, i: number) => {
+ const active = (choices as any)[opt.displayName]
+
+ return (
+ {
+ setChoices((choices) => {
+ return {
+ ...choices,
+ [opt.displayName]: v.label,
+ }
+ })
+ }}
+ />
+ )
+ })}
+
+
+
+
+
+
+ {children}
+}
+
+export default Grid
diff --git a/components/ui/Grid/index.ts b/components/ui/Grid/index.ts
new file mode 100644
index 0000000..ddb5129
--- /dev/null
+++ b/components/ui/Grid/index.ts
@@ -0,0 +1 @@
+export { default } from './Grid'
diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css
new file mode 100644
index 0000000..364ad65
--- /dev/null
+++ b/components/ui/Hero/Hero.module.css
@@ -0,0 +1,6 @@
+.root {
+ @apply mx-auto grid grid-cols-1 py-32 gap-4;
+ @screen md {
+ @apply grid-cols-2;
+ }
+}
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
new file mode 100644
index 0000000..2e1f124
--- /dev/null
+++ b/components/ui/Hero/Hero.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from 'react'
+import { Container } from '@components/ui'
+import { RightArrow } from '@components/icons'
+import s from './Hero.module.css'
+import Link from 'next/link'
+interface Props {
+ className?: string
+ headline: string
+ description: string
+}
+
+const Hero: FC
+
+
+
+ )
+}
+
+export default Hero
diff --git a/components/ui/Hero/index.ts b/components/ui/Hero/index.ts
new file mode 100644
index 0000000..b08fa5a
--- /dev/null
+++ b/components/ui/Hero/index.ts
@@ -0,0 +1 @@
+export { default } from './Hero'
diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css
new file mode 100644
index 0000000..9ace852
--- /dev/null
+++ b/components/ui/Input/Input.module.css
@@ -0,0 +1,7 @@
+.root {
+ @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
+}
+
+.root:focus {
+ @apply outline-none shadow-outline-gray;
+}
diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx
new file mode 100644
index 0000000..dc2f04a
--- /dev/null
+++ b/components/ui/Input/Input.tsx
@@ -0,0 +1,37 @@
+import cn from 'classnames'
+import s from './Input.module.css'
+import React, { InputHTMLAttributes } from 'react'
+
+export interface Props extends InputHTMLAttributes
+
+ + {headline} +
+
+
+ + {description} +
+ + + Read it here +
+
+ {({ index }) =>
+
+ )
+}
+
+export default M
diff --git a/components/ui/Marquee/index.ts b/components/ui/Marquee/index.ts
new file mode 100644
index 0000000..b59b755
--- /dev/null
+++ b/components/ui/Marquee/index.ts
@@ -0,0 +1 @@
+export { default } from './Marquee'
diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
new file mode 100644
index 0000000..fa6b95e
--- /dev/null
+++ b/components/ui/Modal/Modal.module.css
@@ -0,0 +1,12 @@
+.root {
+ @apply fixed bg-primary text-primary flex items-center inset-0 z-50 justify-center;
+ background-color: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+ @apply bg-primary p-12 border border-accents-2;
+}
+
+.modal:focus {
+ @apply outline-none;
+}
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
new file mode 100644
index 0000000..e31e32e
--- /dev/null
+++ b/components/ui/Modal/Modal.tsx
@@ -0,0 +1,77 @@
+import cn from 'classnames'
+import { FC, useRef } from 'react'
+import s from './Modal.module.css'
+import { useDialog } from '@react-aria/dialog'
+import { FocusScope } from '@react-aria/focus'
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
+import { Cross } from '@components/icons'
+interface Props {
+ className?: string
+ children?: any
+ open?: boolean
+ onClose: () => void
+}
+
+const Modal: FC{children}
}
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+ {children}
+
+
+ {page?.body &&
+ )
+}
+
+Pages.Layout = Layout
diff --git a/pages/_app.tsx b/pages/_app.tsx
new file mode 100644
index 0000000..69f3ce2
--- /dev/null
+++ b/pages/_app.tsx
@@ -0,0 +1,25 @@
+import '@assets/main.css'
+import 'keen-slider/keen-slider.min.css'
+
+import { FC } from 'react'
+import type { AppProps } from 'next/app'
+
+import { ManagedUIContext } from '@components/ui/context'
+import { Head } from '@components/core'
+
+const Noop: FC = ({ children }) => <>{children}
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+ const Layout = (Component as any).Layout || Noop
+
+ return (
+ <>
+
+
+
+
+ )
+}
+
+Blog.Layout = Layout
diff --git a/pages/cart.tsx b/pages/cart.tsx
new file mode 100644
index 0000000..9304f82
--- /dev/null
+++ b/pages/cart.tsx
@@ -0,0 +1,145 @@
+import type { GetStaticPropsContext } from 'next'
+import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
+import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
+import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
+import { Layout } from '@components/core'
+import { Button } from '@components/ui'
+import { Bag, Cross, Check } from '@components/icons'
+import { CartItem } from '@components/cart'
+import { Text } from '@components/ui'
+
+export async function getStaticProps({
+ preview,
+ locale,
+}: GetStaticPropsContext) {
+ const config = getConfig({ locale })
+ const { pages } = await getAllPages({ config, preview })
+ return {
+ props: { pages },
+ }
+}
+
+export default function Cart() {
+ const { data, isEmpty } = useCart()
+ const { price: subTotal } = usePrice(
+ data && {
+ amount: data.base_amount,
+ currencyCode: data.currency.code,
+ }
+ )
+ const { price: total } = usePrice(
+ data && {
+ amount: data.cart_amount,
+ currencyCode: data.currency.code,
+ }
+ )
+
+ const items = data?.line_items.physical_items ?? []
+
+ const error = null
+ const success = null
+
+ return (
+
+
+
+
+ + Welcome to Acme, the simplest way to start publishing with Next.js +
++ The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the + ‘Carbon’ iteration, and now release details have been locked in for + this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the + shoe was originally called ‘Abez’, which translated to ‘Tin’ in + Hebrew. It’s now undergone a name change, and will be referred to as + ‘Natura` +
+
+
+
+
+
+ 
+
+
+
+
+
+ José Rodriguez
+
+
+ CEO, Acme
+
+
+ 
+
+ {/** Replace by HTML Content */}
+
+
+
+ + Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. + Candy canes bonbon dragée jujubes chocolate bar. Cotton candy gummi + bears toffee cake muffin caramels. Gummi bears danish liquorice ice + cream pie chocolate cake lemon drops tootsie roll tart. Biscuit + gingerbread fruitcake cake powder pudding cotton candy chocolate + bar. Sweet donut marshmallow powder gummies jelly tart powder. + Cheesecake bonbon caramels cupcake jujubes halvah donut dessert + chocolate bar. Jelly gummies liquorice lollipop chocolate bar + chocolate cake sugar plum. Lollipop toffee dragée chocolate bar + jelly beans biscuit. Halvah danish cheesecake. Tiramisu donut + lollipop pie donut caramels tiramisu. Jujubes candy canes pudding + danish fruitcake chupa chups jujubes carrot cake bonbon. Halvah + donut jelly halvah bonbon. +
++ Biscuit sugar plum sweet chocolate cake sesame snaps soufflé + topping. Gummies topping bonbon chocolate pudding cookie. Wafer + icing cake pastry. Gummies candy dessert chupa chups lemon drops. + Soufflé marshmallow oat cake chocolate jelly-o caramels pie marzipan + jelly beans. Cheesecake liquorice donut jujubes halvah ice cream + cotton candy cupcake sugar plum. Ice cream ice cream sweet roll + fruitcake icing. Muffin candy canes bonbon croissant gummies lemon + drops pie danish. Oat cake chocolate toffee cake jelly tart + caramels. Sweet donut cheesecake pastry pie sweet. Bonbon lollipop + brownie. Soufflé pudding macaroon cotton candy gingerbread. Biscuit + macaroon gummi bears candy canes chocolate cake lemon drops + marshmallow. Chocolate cake cotton candy marshmallow cake sweet + tootsie roll bonbon carrot cake sugar plum. +
+
+
+ )
+}
+
+Cart.Layout = Layout
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 0000000..ba275f7
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,143 @@
+import { useMemo } from 'react'
+import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
+import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
+import getSiteInfo from '@bigcommerce/storefront-data-hooks/api/operations/get-site-info'
+import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import rangeMap from '@lib/range-map'
+import { Layout } from '@components/core'
+import { Grid, Marquee, Hero } from '@components/ui'
+import { ProductCard } from '@components/product'
+import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid'
+
+export async function getStaticProps({
+ preview,
+ locale,
+}: GetStaticPropsContext) {
+ const config = getConfig({ locale })
+
+ const { products: featuredProducts } = await getAllProducts({
+ variables: { field: 'featuredProducts', first: 6 },
+ config,
+ preview,
+ })
+ const { products: bestSellingProducts } = await getAllProducts({
+ variables: { field: 'bestSellingProducts', first: 6 },
+ config,
+ preview,
+ })
+ const { products: newestProducts } = await getAllProducts({
+ variables: { field: 'newestProducts', first: 12 },
+ config,
+ preview,
+ })
+ const { categories, brands } = await getSiteInfo({ config, preview })
+ const { pages } = await getAllPages({ config, preview })
+
+ return {
+ props: {
+ featuredProducts,
+ bestSellingProducts,
+ newestProducts,
+ categories,
+ brands,
+ pages,
+ },
+ revalidate: 10,
+ }
+}
+
+const nonNullable = (v: any) => v
+
+export default function Home({
+ featuredProducts,
+ bestSellingProducts,
+ newestProducts,
+ categories,
+ brands,
+}: InferGetStaticPropsType
+ {isEmpty ? (
+
+
+
+
+ ) : error ? (
+ + Your cart is empty +
++ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +
+
+
+
+ ) : success ? (
+ + We couldn’t process the purchase. Please check your card + information and try again. +
+
+
+
+ ) : (
+ + Thank you for your order. +
+
+ My Cart
+ Review your Order
+
+ )}
+ -
+ {items.map((item) => (
+
+
+ Before you leave, take a look at these items. We picked them
+ just for you
+
+
+
+ {[1, 2, 3, 4, 5, 6].map((x) => (
+
+ ))}
+
+
+
+
+
+
+
+ -
+
- + Subtotal + {subTotal} + +
- + Taxes + Calculated at checkout + +
- + Estimated Shipping + FREE + +
+ Total
+ {total}
+
+
+
+
+ {isEmpty ? (
+
+ ) : (
+
+ )}
+
+
+
+ {featured.slice(0, 3).map(({ node }, i) => (
+
+
+
+ {featured.slice(3, 6).map(({ node }, i) => (
+
+
+
+ )
+}
+
+Home.Layout = Layout
diff --git a/pages/orders.tsx b/pages/orders.tsx
new file mode 100644
index 0000000..a6c4cf2
--- /dev/null
+++ b/pages/orders.tsx
@@ -0,0 +1,38 @@
+import type { GetStaticPropsContext } from 'next'
+import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
+import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { Layout } from '@components/core'
+import { Container, Text } from '@components/ui'
+import { Bag } from '@components/icons'
+
+export async function getStaticProps({
+ preview,
+ locale,
+}: GetStaticPropsContext) {
+ const config = getConfig({ locale })
+ const { pages } = await getAllPages({ config, preview })
+ return {
+ props: { pages },
+ }
+}
+
+export default function Orders() {
+ return (
+
+
+
+ + No orders found +
++ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +
+Loading...
// TODO (BC) Add Skeleton Views + ) : ( +
+
+ )}
+
+
+
+ Full Name
+
+ {data.firstName} {data.lastName}
+
+
+
+ Email
+ {data.email}
+
+
+
+
+
+ -
+
- + + All Categories + + + {categories.map((cat) => ( +
- + + {cat.name} + + + ))} +
-
+
- + + All Designers + + + {brands.flatMap(({ node }) => ( +
- + + {node.name} + + + ))} +
+ {(q || activeCategory || activeBrand) && (
+
+ {data.products.map(({ node }) => (
+
+ ) : (
+
+ {rangeMap(12, (i) => (
+
+ )}
+
+
+
+ {data ? (
+ <>
+
+ Showing {data.products.length} results{' '}
+ {q && (
+ <>
+ for "{q}"
+
+ )}
+
+
+ {q ? (
+ <>
+ There are no products that match "{q}"
+
+ ) : (
+ <>
+ There are no products that match the selected category &
+ designer
+
+ )}
+
+
+ ) : q ? (
+ <>
+ Searching for: "{q}"
+
+ ) : (
+ <>Searching...
+ )}
+
+ )}
+
+ {data ? (
+
+ My Wishlist
+
+
+ {isEmpty ? (
+
+
+
+
+ ) : (
+
+ {data &&
+ data.items?.map((item) => (
+
+
+ ))}
+
+ )}
+
+
+
+
+ + Your wishlist is empty +
++ Biscuit oat cake wafer icing ice cream tiramisu pudding + cupcake. +
+