forked from crowetic/commerce
commit
b0413fe6f1
@ -97,15 +97,17 @@ const CartItem = ({
|
|||||||
<button type="button" onClick={() => increaseQuantity(-1)}>
|
<button type="button" onClick={() => increaseQuantity(-1)}>
|
||||||
<Minus width={18} height={18} />
|
<Minus width={18} height={18} />
|
||||||
</button>
|
</button>
|
||||||
<input
|
<label>
|
||||||
type="number"
|
<input
|
||||||
max={99}
|
type="number"
|
||||||
min={0}
|
max={99}
|
||||||
className={s.quantity}
|
min={0}
|
||||||
value={quantity}
|
className={s.quantity}
|
||||||
onChange={handleQuantity}
|
value={quantity}
|
||||||
onBlur={handleBlur}
|
onChange={handleQuantity}
|
||||||
/>
|
onBlur={handleBlur}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
<button type="button" onClick={() => increaseQuantity(1)}>
|
<button type="button" onClick={() => increaseQuantity(1)}>
|
||||||
<Plus width={18} height={18} />
|
<Plus width={18} height={18} />
|
||||||
</button>
|
</button>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { FC, useState } from 'react'
|
import { FC, useState, useMemo, useRef, useEffect } from 'react'
|
||||||
import { getRandomPairOfColors } from '@lib/colors'
|
import { getRandomPairOfColors } from '@lib/colors'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -8,14 +8,19 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Avatar: FC<Props> = ({}) => {
|
const Avatar: FC<Props> = ({}) => {
|
||||||
const [bg] = useState(getRandomPairOfColors)
|
const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
|
||||||
|
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (ref && ref.current) {
|
||||||
|
ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
|
||||||
|
}
|
||||||
|
}, [bg])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
ref={ref}
|
||||||
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
|
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
|
||||||
style={{
|
|
||||||
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{/* Add an image - We're generating a gradient as placeholder <img></img> */}
|
{/* Add an image - We're generating a gradient as placeholder <img></img> */}
|
||||||
</div>
|
</div>
|
||||||
|
@ -84,7 +84,11 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<a href="https://github.com/vercel/commerce" className={s.link}>
|
<a
|
||||||
|
aria-label="Github Repository"
|
||||||
|
href="https://github.com/vercel/commerce"
|
||||||
|
className={s.link}
|
||||||
|
>
|
||||||
<Github />
|
<Github />
|
||||||
</a>
|
</a>
|
||||||
<I18nWidget />
|
<I18nWidget />
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { getCategoryPath, getDesignerPath } from '@lib/search'
|
|
||||||
import { Grid } from '@components/ui'
|
import { Grid } from '@components/ui'
|
||||||
import { ProductCard } from '@components/product'
|
import { ProductCard } from '@components/product'
|
||||||
import s from './HomeAllProductsGrid.module.css'
|
import s from './HomeAllProductsGrid.module.css'
|
||||||
|
import { getCategoryPath, getDesignerPath } from '@lib/search'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
categories?: any
|
categories?: any
|
||||||
|
@ -1,17 +1,45 @@
|
|||||||
import { FC, useCallback, useEffect, useState } from 'react'
|
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import { useRouter } from 'next/router'
|
import dynamic from 'next/dynamic'
|
||||||
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
|
||||||
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
|
||||||
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
|
|
||||||
import { CartSidebarView } from '@components/cart'
|
|
||||||
import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
|
|
||||||
import { Navbar, FeatureBar, Footer } from '@components/common'
|
|
||||||
import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
|
|
||||||
import { useUI } from '@components/ui/context'
|
|
||||||
import { usePreventScroll } from '@react-aria/overlays'
|
|
||||||
import s from './Layout.module.css'
|
import s from './Layout.module.css'
|
||||||
import debounce from 'lodash.debounce'
|
import { useRouter } from 'next/router'
|
||||||
|
import React, { FC } from 'react'
|
||||||
|
import { useUI } from '@components/ui/context'
|
||||||
|
import { Navbar, Footer } from '@components/common'
|
||||||
|
import { usePreventScroll } from '@react-aria/overlays'
|
||||||
|
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
|
||||||
|
import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
|
||||||
|
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
|
||||||
|
import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
|
||||||
|
|
||||||
|
const Loading = () => (
|
||||||
|
<div className="w-80 h-80 flex items-center text-center justify-center p-3">
|
||||||
|
<LoadingDots />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const dynamicProps = {
|
||||||
|
loading: () => <Loading />,
|
||||||
|
}
|
||||||
|
const CartSidebarView = dynamic(
|
||||||
|
() => import('@components/cart/CartSidebarView')
|
||||||
|
)
|
||||||
|
const LoginView = dynamic(
|
||||||
|
() => import('@components/auth/LoginView'),
|
||||||
|
dynamicProps
|
||||||
|
)
|
||||||
|
const SignUpView = dynamic(
|
||||||
|
() => import('@components/auth/SignUpView'),
|
||||||
|
dynamicProps
|
||||||
|
)
|
||||||
|
const ForgotPassword = dynamic(
|
||||||
|
() => import('@components/auth/ForgotPassword'),
|
||||||
|
dynamicProps
|
||||||
|
)
|
||||||
|
const FeatureBar = dynamic(
|
||||||
|
() => import('@components/common/FeatureBar'),
|
||||||
|
dynamicProps
|
||||||
|
)
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
pageProps: {
|
pageProps: {
|
||||||
pages?: Page[]
|
pages?: Page[]
|
||||||
@ -25,55 +53,23 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
closeSidebar,
|
closeSidebar,
|
||||||
closeModal,
|
closeModal,
|
||||||
modalView,
|
modalView,
|
||||||
toastText,
|
|
||||||
closeToast,
|
|
||||||
displayToast,
|
|
||||||
} = useUI()
|
} = useUI()
|
||||||
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
|
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
|
||||||
const [hasScrolled, setHasScrolled] = useState(false)
|
|
||||||
const { locale = 'en-US' } = useRouter()
|
const { locale = 'en-US' } = useRouter()
|
||||||
|
|
||||||
usePreventScroll({
|
usePreventScroll({
|
||||||
isDisabled: !(displaySidebar || displayModal),
|
isDisabled: !(displaySidebar || displayModal),
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleScroll = useCallback(
|
|
||||||
debounce(() => {
|
|
||||||
const offset = 0
|
|
||||||
const { scrollTop } = document.documentElement
|
|
||||||
const scrolled = scrollTop > offset
|
|
||||||
|
|
||||||
setHasScrolled(scrolled)
|
|
||||||
}, 1),
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.addEventListener('scroll', handleScroll)
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('scroll', handleScroll)
|
|
||||||
}
|
|
||||||
}, [handleScroll])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CommerceProvider locale={locale}>
|
<CommerceProvider locale={locale}>
|
||||||
<div className={cn(s.root)}>
|
<div className={cn(s.root)}>
|
||||||
<header
|
<Navbar />
|
||||||
className={cn(
|
|
||||||
'sticky top-0 bg-primary z-40 transition-all duration-150',
|
|
||||||
{ 'shadow-magical': hasScrolled }
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Container>
|
|
||||||
<Navbar />
|
|
||||||
</Container>
|
|
||||||
</header>
|
|
||||||
<main className="fit">{children}</main>
|
<main className="fit">{children}</main>
|
||||||
<Footer pages={pageProps.pages} />
|
<Footer pages={pageProps.pages} />
|
||||||
<Sidebar open={displaySidebar} onClose={closeSidebar}>
|
<Sidebar open={displaySidebar} onClose={closeSidebar}>
|
||||||
<CartSidebarView />
|
<CartSidebarView />
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Modal open={displayModal} onClose={closeModal}>
|
<Modal open={displayModal} onClose={closeModal}>
|
||||||
{modalView === 'LOGIN_VIEW' && <LoginView />}
|
{modalView === 'LOGIN_VIEW' && <LoginView />}
|
||||||
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
||||||
@ -88,10 +84,6 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* <Toast open={displayToast} onClose={closeModal}>
|
|
||||||
{toastText}
|
|
||||||
</Toast> */}
|
|
||||||
</div>
|
</div>
|
||||||
</CommerceProvider>
|
</CommerceProvider>
|
||||||
)
|
)
|
||||||
|
@ -1,3 +1,7 @@
|
|||||||
|
.root {
|
||||||
|
@apply sticky top-0 bg-primary z-40 transition-all duration-150;
|
||||||
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
@apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
|
@apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
|
||||||
}
|
}
|
||||||
|
@ -1,49 +1,64 @@
|
|||||||
import { FC } from 'react'
|
import { FC, useState, useEffect } from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import s from './Navbar.module.css'
|
import s from './Navbar.module.css'
|
||||||
import { Logo } from '@components/ui'
|
import { Logo, Container } from '@components/ui'
|
||||||
import { Searchbar, UserNav } from '@components/common'
|
import { Searchbar, UserNav } from '@components/common'
|
||||||
interface Props {
|
import cn from 'classnames'
|
||||||
className?: string
|
import throttle from 'lodash.throttle'
|
||||||
}
|
|
||||||
|
|
||||||
const Navbar: FC<Props> = ({ className }) => {
|
const Navbar: FC = () => {
|
||||||
const rootClassName = className
|
const [hasScrolled, setHasScrolled] = useState(false)
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
const offset = 0
|
||||||
|
const { scrollTop } = document.documentElement
|
||||||
|
const scrolled = scrollTop > offset
|
||||||
|
setHasScrolled(scrolled)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.addEventListener('scroll', throttle(handleScroll, 200))
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('scroll', handleScroll)
|
||||||
|
}
|
||||||
|
}, [handleScroll])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
|
||||||
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
|
<Container>
|
||||||
<div className="flex flex-1 items-center">
|
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
|
||||||
<Link href="/">
|
<div className="flex flex-1 items-center">
|
||||||
<a className={s.logo} aria-label="Logo">
|
|
||||||
<Logo />
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
<nav className="space-x-4 ml-6 hidden lg:block">
|
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a className={s.link}>All</a>
|
<a className={s.logo} aria-label="Logo">
|
||||||
|
<Logo />
|
||||||
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/search?q=clothes">
|
<nav className="space-x-4 ml-6 hidden lg:block">
|
||||||
<a className={s.link}>Clothes</a>
|
<Link href="/">
|
||||||
</Link>
|
<a className={s.link}>All</a>
|
||||||
<Link href="/search?q=accessories">
|
</Link>
|
||||||
<a className={s.link}>Accessories</a>
|
<Link href="/search?q=clothes">
|
||||||
</Link>
|
<a className={s.link}>Clothes</a>
|
||||||
</nav>
|
</Link>
|
||||||
|
<Link href="/search?q=accessories">
|
||||||
|
<a className={s.link}>Accessories</a>
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 justify-center hidden lg:flex">
|
||||||
|
<Searchbar />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-1 justify-end space-x-8">
|
||||||
|
<UserNav />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 justify-center hidden lg:flex">
|
<div className="flex pb-4 lg:px-6 lg:hidden">
|
||||||
<Searchbar />
|
<Searchbar id="mobileSearch" />
|
||||||
</div>
|
</div>
|
||||||
|
</Container>
|
||||||
<div className="flex flex-1 justify-end space-x-8">
|
|
||||||
<UserNav />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex pb-4 lg:px-6 lg:hidden">
|
|
||||||
<Searchbar id="mobileSearch" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { FC, useEffect } from 'react'
|
import { FC, useEffect, useMemo } from 'react'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import s from './Searchbar.module.css'
|
import s from './Searchbar.module.css'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
@ -15,14 +15,17 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
|
|||||||
router.prefetch('/search')
|
router.prefetch('/search')
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return useMemo(
|
||||||
<div
|
() => (
|
||||||
className={cn(
|
<div
|
||||||
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
|
className={cn(
|
||||||
className
|
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
|
||||||
)}
|
className
|
||||||
>
|
)}
|
||||||
<label htmlFor={id}>
|
>
|
||||||
|
<label className="hidden" htmlFor={id}>
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
id={id}
|
id={id}
|
||||||
className={s.input}
|
className={s.input}
|
||||||
@ -45,17 +48,18 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</label>
|
<div className={s.iconContainer}>
|
||||||
<div className={s.iconContainer}>
|
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
|
||||||
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
|
<path
|
||||||
<path
|
fillRule="evenodd"
|
||||||
fillRule="evenodd"
|
clipRule="evenodd"
|
||||||
clipRule="evenodd"
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
/>
|
||||||
/>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
),
|
||||||
|
[]
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
|
|||||||
</li>
|
</li>
|
||||||
<li className={s.item}>
|
<li className={s.item}>
|
||||||
<Link href="/wishlist">
|
<Link href="/wishlist">
|
||||||
<a onClick={closeSidebarIfPresent}>
|
<a onClick={closeSidebarIfPresent} aria-label="Wishlist">
|
||||||
<Heart />
|
<Heart />
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -5,11 +5,11 @@ const Cross = ({ ...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="M18 6L6 18" />
|
<path d="M18 6L6 18" />
|
||||||
|
@ -5,11 +5,11 @@ const Info = ({ ...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="10" fill="transparent" />
|
<circle cx="12" cy="12" r="10" fill="transparent" />
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
|
@apply relative max-h-full w-full box-border overflow-hidden
|
||||||
|
bg-no-repeat bg-center bg-cover transition-transform
|
||||||
|
ease-linear cursor-pointer;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -67,24 +69,24 @@
|
|||||||
.productTitle > span,
|
.productTitle > span,
|
||||||
.productPrice,
|
.productPrice,
|
||||||
.wishlistButton {
|
.wishlistButton {
|
||||||
@apply transition ease-in-out duration-500;
|
@apply transition-colors ease-in-out duration-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareBg {
|
.squareBg {
|
||||||
@apply transform absolute inset-0 z-0;
|
@apply transition-colors absolute inset-0 z-0;
|
||||||
background-color: #212529;
|
background-color: #212529;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareBg:before {
|
.squareBg:before {
|
||||||
@apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
|
@apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
|
||||||
|
background-image: url('/bg-products.svg');
|
||||||
content: '';
|
content: '';
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple {
|
.simple {
|
||||||
& .squareBg {
|
& .squareBg {
|
||||||
@apply bg-accents-0 !important;
|
@apply bg-accents-0 !important;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
background-image: url('/bg-products.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
& .productTitle {
|
& .productTitle {
|
||||||
@ -125,15 +127,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.imageContainer {
|
.imageContainer {
|
||||||
|
@apply flex items-center justify-center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
& > div {
|
min-width: 100%;
|
||||||
height: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-image {
|
.image {
|
||||||
height: 120% !important;
|
object-fit: cover;
|
||||||
top: -10% !important;
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
@ -13,7 +13,10 @@ interface Props {
|
|||||||
variant?: 'slim' | 'simple'
|
variant?: 'slim' | 'simple'
|
||||||
imgWidth: number | string
|
imgWidth: number | string
|
||||||
imgHeight: number | string
|
imgHeight: number | string
|
||||||
priority?: boolean
|
imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
|
||||||
|
imgPriority?: boolean
|
||||||
|
imgLoading?: 'eager' | 'lazy'
|
||||||
|
imgSizes?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductCard: FC<Props> = ({
|
const ProductCard: FC<Props> = ({
|
||||||
@ -22,7 +25,10 @@ const ProductCard: FC<Props> = ({
|
|||||||
variant,
|
variant,
|
||||||
imgWidth,
|
imgWidth,
|
||||||
imgHeight,
|
imgHeight,
|
||||||
priority,
|
imgPriority,
|
||||||
|
imgLoading,
|
||||||
|
imgSizes,
|
||||||
|
imgLayout = 'responsive',
|
||||||
}) => {
|
}) => {
|
||||||
const src = p.images.edges?.[0]?.node?.urlOriginal!
|
const src = p.images.edges?.[0]?.node?.urlOriginal!
|
||||||
const { price } = usePrice({
|
const { price } = usePrice({
|
||||||
@ -44,12 +50,15 @@ const ProductCard: FC<Props> = ({
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Image
|
<Image
|
||||||
|
quality="85"
|
||||||
|
width={imgWidth}
|
||||||
|
sizes={imgSizes}
|
||||||
|
height={imgHeight}
|
||||||
|
layout={imgLayout}
|
||||||
|
loading={imgLoading}
|
||||||
|
priority={imgPriority}
|
||||||
src={p.images.edges?.[0]?.node.urlOriginal!}
|
src={p.images.edges?.[0]?.node.urlOriginal!}
|
||||||
alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
|
alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
|
||||||
width={imgWidth}
|
|
||||||
height={imgHeight}
|
|
||||||
priority={priority}
|
|
||||||
quality="85"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -70,13 +79,16 @@ const ProductCard: FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
<div className={s.imageContainer}>
|
<div className={s.imageContainer}>
|
||||||
<Image
|
<Image
|
||||||
alt={p.name}
|
|
||||||
className={cn('w-full object-cover', s['product-image'])}
|
|
||||||
src={src}
|
|
||||||
width={imgWidth}
|
|
||||||
height={imgHeight}
|
|
||||||
priority={priority}
|
|
||||||
quality="85"
|
quality="85"
|
||||||
|
src={src}
|
||||||
|
alt={p.name}
|
||||||
|
className={s.image}
|
||||||
|
width={imgWidth}
|
||||||
|
sizes={imgSizes}
|
||||||
|
height={imgHeight}
|
||||||
|
layout={imgLayout}
|
||||||
|
loading={imgLoading}
|
||||||
|
priority={imgPriority}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
.root {
|
.root {
|
||||||
--row-height: calc(100vh - 80px - 56px);
|
--row-height: calc(100vh - 88px);
|
||||||
@apply grid grid-cols-1 gap-0;
|
@apply grid grid-cols-1 gap-0;
|
||||||
|
min-height: var(--row-height);
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
@apply grid-cols-3 grid-rows-2;
|
@apply grid-cols-3 grid-rows-2;
|
||||||
|
@ -2,6 +2,7 @@ import cn from 'classnames'
|
|||||||
import s from './Marquee.module.css'
|
import s from './Marquee.module.css'
|
||||||
import { FC, ReactNode, Component } from 'react'
|
import { FC, ReactNode, Component } from 'react'
|
||||||
import Ticker from 'react-ticker'
|
import Ticker from 'react-ticker'
|
||||||
|
import { useInView } from 'react-intersection-observer'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
@ -9,7 +10,11 @@ interface Props {
|
|||||||
variant?: 'primary' | 'secondary'
|
variant?: 'primary' | 'secondary'
|
||||||
}
|
}
|
||||||
|
|
||||||
const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
|
const Maquee: FC<Props> = ({
|
||||||
|
className = '',
|
||||||
|
children,
|
||||||
|
variant = 'primary',
|
||||||
|
}) => {
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
{
|
{
|
||||||
@ -18,14 +23,20 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
|
|||||||
},
|
},
|
||||||
className
|
className
|
||||||
)
|
)
|
||||||
|
const [ref, inView] = useInView({
|
||||||
|
triggerOnce: true,
|
||||||
|
rootMargin: '200px 0px',
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName} ref={ref}>
|
||||||
<Ticker offset={80}>
|
{inView ? (
|
||||||
{({ index }) => <div className={s.container}>{children}</div>}
|
<Ticker offset={80}>
|
||||||
</Ticker>
|
{() => <div className={s.container}>{children}</div>}
|
||||||
|
</Ticker>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default M
|
export default Maquee
|
||||||
|
@ -1,16 +0,0 @@
|
|||||||
import * as Bowser from 'bowser'
|
|
||||||
|
|
||||||
export function isDesktop(): boolean {
|
|
||||||
const browser = Bowser.getParser(window.navigator.userAgent)
|
|
||||||
return browser.getPlatform().type === 'desktop'
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isMobile(): boolean {
|
|
||||||
const browser = Bowser.getParser(window.navigator.userAgent)
|
|
||||||
return browser.getPlatform().type === 'mobile'
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isTablet(): boolean {
|
|
||||||
const browser = Bowser.getParser(window.navigator.userAgent)
|
|
||||||
return browser.getPlatform().type === 'tablet'
|
|
||||||
}
|
|
@ -1,6 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
images: {
|
images: {
|
||||||
sizes: [320, 480, 820, 1200, 1600],
|
|
||||||
domains: ['cdn11.bigcommerce.com'],
|
domains: ['cdn11.bigcommerce.com'],
|
||||||
},
|
},
|
||||||
i18n: {
|
i18n: {
|
||||||
|
8868
package-lock.json
generated
8868
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,14 +15,15 @@
|
|||||||
"@headlessui/react": "^0.2.0",
|
"@headlessui/react": "^0.2.0",
|
||||||
"@react-aria/overlays": "^3.4.0",
|
"@react-aria/overlays": "^3.4.0",
|
||||||
"@tailwindcss/ui": "^0.6.2",
|
"@tailwindcss/ui": "^0.6.2",
|
||||||
|
"@types/lodash.throttle": "^4.1.6",
|
||||||
"@vercel/fetch": "^6.1.0",
|
"@vercel/fetch": "^6.1.0",
|
||||||
"bowser": "^2.11.0",
|
"bowser": "^2.11.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"email-validator": "^2.0.4",
|
"email-validator": "^2.0.4",
|
||||||
"js-cookie": "^2.2.1",
|
"js-cookie": "^2.2.1",
|
||||||
"keen-slider": "^5.2.4",
|
"keen-slider": "^5.2.4",
|
||||||
"lodash.debounce": "^4.0.8",
|
|
||||||
"lodash.random": "^3.2.0",
|
"lodash.random": "^3.2.0",
|
||||||
|
"lodash.throttle": "^4.1.1",
|
||||||
"next": "^10.0.1-canary.7",
|
"next": "^10.0.1-canary.7",
|
||||||
"next-seo": "^4.11.0",
|
"next-seo": "^4.11.0",
|
||||||
"next-themes": "^0.0.4",
|
"next-themes": "^0.0.4",
|
||||||
@ -30,6 +31,7 @@
|
|||||||
"react": "^16.14.0",
|
"react": "^16.14.0",
|
||||||
"react-aria": "^3.0.0",
|
"react-aria": "^3.0.0",
|
||||||
"react-dom": "^16.14.0",
|
"react-dom": "^16.14.0",
|
||||||
|
"react-intersection-observer": "^8.30.1",
|
||||||
"react-merge-refs": "^1.1.0",
|
"react-merge-refs": "^1.1.0",
|
||||||
"react-ticker": "^1.2.2",
|
"react-ticker": "^1.2.2",
|
||||||
"tailwindcss": "^1.9"
|
"tailwindcss": "^1.9"
|
||||||
@ -39,7 +41,6 @@
|
|||||||
"@types/bunyan-prettystream": "^0.1.31",
|
"@types/bunyan-prettystream": "^0.1.31",
|
||||||
"@types/classnames": "^2.2.10",
|
"@types/classnames": "^2.2.10",
|
||||||
"@types/js-cookie": "^2.2.6",
|
"@types/js-cookie": "^2.2.6",
|
||||||
"@types/lodash.debounce": "^4.0.6",
|
|
||||||
"@types/lodash.random": "^3.2.6",
|
"@types/lodash.random": "^3.2.6",
|
||||||
"@types/node": "^14.11.2",
|
"@types/node": "^14.11.2",
|
||||||
"@types/react": "^16.9.49",
|
"@types/react": "^16.9.49",
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
import { useMemo } from 'react'
|
|
||||||
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
|
||||||
import rangeMap from '@lib/range-map'
|
import rangeMap from '@lib/range-map'
|
||||||
import { Layout } from '@components/common'
|
import { Layout } from '@components/common'
|
||||||
import { Grid, Marquee, Hero } from '@components/ui'
|
|
||||||
import { ProductCard } from '@components/product'
|
import { ProductCard } from '@components/product'
|
||||||
|
import { Grid, Marquee, Hero } from '@components/ui'
|
||||||
import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
|
import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
|
||||||
|
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
|
|
||||||
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
|
import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
|
||||||
import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
|
import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
|
||||||
@ -17,47 +16,33 @@ export async function getStaticProps({
|
|||||||
}: GetStaticPropsContext) {
|
}: GetStaticPropsContext) {
|
||||||
const config = getConfig({ locale })
|
const config = getConfig({ locale })
|
||||||
|
|
||||||
|
// Get Featured Products
|
||||||
const { products: featuredProducts } = await getAllProducts({
|
const { products: featuredProducts } = await getAllProducts({
|
||||||
variables: { field: 'featuredProducts', first: 6 },
|
variables: { field: 'featuredProducts', first: 6 },
|
||||||
config,
|
config,
|
||||||
preview,
|
preview,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Get Best Selling Products
|
||||||
const { products: bestSellingProducts } = await getAllProducts({
|
const { products: bestSellingProducts } = await getAllProducts({
|
||||||
variables: { field: 'bestSellingProducts', first: 6 },
|
variables: { field: 'bestSellingProducts', first: 6 },
|
||||||
config,
|
config,
|
||||||
preview,
|
preview,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Get Best Newest Products
|
||||||
const { products: newestProducts } = await getAllProducts({
|
const { products: newestProducts } = await getAllProducts({
|
||||||
variables: { field: 'newestProducts', first: 12 },
|
variables: { field: 'newestProducts', first: 12 },
|
||||||
config,
|
config,
|
||||||
preview,
|
preview,
|
||||||
})
|
})
|
||||||
|
|
||||||
const { categories, brands } = await getSiteInfo({ config, preview })
|
const { categories, brands } = await getSiteInfo({ config, preview })
|
||||||
const { pages } = await getAllPages({ config, preview })
|
const { pages } = await getAllPages({ config, preview })
|
||||||
|
|
||||||
return {
|
// These are the products that are going to be displayed in the landing.
|
||||||
props: {
|
// We prefer to do the computation at buildtime/servertime
|
||||||
featuredProducts,
|
const { featured, bestSelling } = (() => {
|
||||||
bestSellingProducts,
|
|
||||||
newestProducts,
|
|
||||||
categories,
|
|
||||||
brands,
|
|
||||||
pages,
|
|
||||||
},
|
|
||||||
revalidate: 10,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const nonNullable = (v: any) => v
|
|
||||||
|
|
||||||
export default function Home({
|
|
||||||
featuredProducts,
|
|
||||||
bestSellingProducts,
|
|
||||||
newestProducts,
|
|
||||||
categories,
|
|
||||||
brands,
|
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
|
||||||
const { featured, bestSelling } = useMemo(() => {
|
|
||||||
// Create a copy of products that we can mutate
|
// Create a copy of products that we can mutate
|
||||||
const products = [...newestProducts]
|
const products = [...newestProducts]
|
||||||
// If the lists of featured and best selling products don't have enough
|
// If the lists of featured and best selling products don't have enough
|
||||||
@ -73,8 +58,30 @@ export default function Home({
|
|||||||
(i) => bestSellingProducts[i] ?? products.shift()
|
(i) => bestSellingProducts[i] ?? products.shift()
|
||||||
).filter(nonNullable),
|
).filter(nonNullable),
|
||||||
}
|
}
|
||||||
}, [newestProducts, featuredProducts, bestSellingProducts])
|
})()
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
featured,
|
||||||
|
bestSelling,
|
||||||
|
newestProducts,
|
||||||
|
categories,
|
||||||
|
brands,
|
||||||
|
pages,
|
||||||
|
},
|
||||||
|
revalidate: 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const nonNullable = (v: any) => v
|
||||||
|
|
||||||
|
export default function Home({
|
||||||
|
featured,
|
||||||
|
bestSelling,
|
||||||
|
brands,
|
||||||
|
categories,
|
||||||
|
newestProducts,
|
||||||
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Grid>
|
<Grid>
|
||||||
@ -82,10 +89,10 @@ export default function Home({
|
|||||||
<ProductCard
|
<ProductCard
|
||||||
key={node.path}
|
key={node.path}
|
||||||
product={node}
|
product={node}
|
||||||
// The first image is the largest one in the grid
|
imgWidth={i === 0 ? 1080 : 540}
|
||||||
imgWidth={i === 0 ? 1600 : 820}
|
imgHeight={i === 0 ? 1080 : 540}
|
||||||
imgHeight={i === 0 ? 1600 : 820}
|
imgPriority
|
||||||
priority
|
imgLoading="eager"
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
@ -97,6 +104,7 @@ export default function Home({
|
|||||||
variant="slim"
|
variant="slim"
|
||||||
imgWidth={320}
|
imgWidth={320}
|
||||||
imgHeight={320}
|
imgHeight={320}
|
||||||
|
imgLayout="fixed"
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
@ -115,9 +123,8 @@ export default function Home({
|
|||||||
<ProductCard
|
<ProductCard
|
||||||
key={node.path}
|
key={node.path}
|
||||||
product={node}
|
product={node}
|
||||||
// The second image is the largest one in the grid
|
imgWidth={i === 1 ? 1080 : 540}
|
||||||
imgWidth={i === 1 ? 1600 : 820}
|
imgHeight={i === 1 ? 1080 : 540}
|
||||||
imgHeight={i === 1 ? 1600 : 820}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
@ -129,6 +136,7 @@ export default function Home({
|
|||||||
variant="slim"
|
variant="slim"
|
||||||
imgWidth={320}
|
imgWidth={320}
|
||||||
imgHeight={320}
|
imgHeight={320}
|
||||||
|
imgLayout="fixed"
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
|
7
public/bg-products.svg
Normal file
7
public/bg-products.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg width="48" height="46" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<line opacity="0.1" x1="9.41421" y1="8" x2="21" y2="19.5858" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(-0.707107 0.707107 0.707107 0.707107 40 8)" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<line opacity="0.1" x1="1" y1="-1" x2="17.3848" y2="-1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<line opacity="0.1" x1="38.5858" y1="38" x2="27" y2="26.4142" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
|
After Width: | Height: | Size: 797 B |
26
yarn.lock
26
yarn.lock
@ -1818,13 +1818,6 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
|
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
|
||||||
integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
|
integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
|
||||||
|
|
||||||
"@types/lodash.debounce@^4.0.6":
|
|
||||||
version "4.0.6"
|
|
||||||
resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
|
|
||||||
integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
|
|
||||||
dependencies:
|
|
||||||
"@types/lodash" "*"
|
|
||||||
|
|
||||||
"@types/lodash.random@^3.2.6":
|
"@types/lodash.random@^3.2.6":
|
||||||
version "3.2.6"
|
version "3.2.6"
|
||||||
resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.6.tgz#64b08abad168dca39c778ed40cce75b2f9e168eb"
|
resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.6.tgz#64b08abad168dca39c778ed40cce75b2f9e168eb"
|
||||||
@ -1832,6 +1825,13 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
"@types/lodash" "*"
|
"@types/lodash" "*"
|
||||||
|
|
||||||
|
"@types/lodash.throttle@^4.1.6":
|
||||||
|
version "4.1.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz#f5ba2c22244ee42ff6c2c49e614401a870c1009c"
|
||||||
|
integrity sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==
|
||||||
|
dependencies:
|
||||||
|
"@types/lodash" "*"
|
||||||
|
|
||||||
"@types/lodash@*":
|
"@types/lodash@*":
|
||||||
version "4.14.162"
|
version "4.14.162"
|
||||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.162.tgz#65d78c397e0d883f44afbf1f7ba9867022411470"
|
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.162.tgz#65d78c397e0d883f44afbf1f7ba9867022411470"
|
||||||
@ -3747,7 +3747,7 @@ lodash._reinterpolate@^3.0.0:
|
|||||||
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
|
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
|
||||||
integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
|
integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
|
||||||
|
|
||||||
lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
|
lodash.debounce@4.0.8:
|
||||||
version "4.0.8"
|
version "4.0.8"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||||
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
|
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
|
||||||
@ -3777,6 +3777,11 @@ lodash.templatesettings@^4.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
lodash._reinterpolate "^3.0.0"
|
lodash._reinterpolate "^3.0.0"
|
||||||
|
|
||||||
|
lodash.throttle@^4.1.1:
|
||||||
|
version "4.1.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
|
||||||
|
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
|
||||||
|
|
||||||
lodash.toarray@^4.4.0:
|
lodash.toarray@^4.4.0:
|
||||||
version "4.4.0"
|
version "4.4.0"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
|
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
|
||||||
@ -4896,6 +4901,11 @@ react-dom@^16.14.0:
|
|||||||
prop-types "^15.6.2"
|
prop-types "^15.6.2"
|
||||||
scheduler "^0.19.1"
|
scheduler "^0.19.1"
|
||||||
|
|
||||||
|
react-intersection-observer@^8.30.1:
|
||||||
|
version "8.30.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.30.1.tgz#e0ce4835d2834fc712b096aec65230de79eeaadb"
|
||||||
|
integrity sha512-BGHGkmWz/d4Gs+44jWkrZBtJ6//HGwouZ9ub+kRRoRfguw2JoDlVrgTDwkQ/deDJAR9keTkQmMilNu+onhqfgw==
|
||||||
|
|
||||||
react-is@16.13.1, react-is@^16.8.1:
|
react-is@16.13.1, react-is@^16.8.1:
|
||||||
version "16.13.1"
|
version "16.13.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user