forked from crowetic/commerce
Merge branch 'master' of github.com:okbel/e-comm-example
This commit is contained in:
commit
62277666b1
@ -11,6 +11,8 @@
|
|||||||
--text-secondary: white;
|
--text-secondary: white;
|
||||||
|
|
||||||
--hover: rgba(0, 0, 0, 0.075);
|
--hover: rgba(0, 0, 0, 0.075);
|
||||||
|
--hover-1: rgba(0, 0, 0, 0.15);
|
||||||
|
--hover-2: rgba(0, 0, 0, 0.25);
|
||||||
|
|
||||||
--cyan: #22b8cf;
|
--cyan: #22b8cf;
|
||||||
--green: #37b679;
|
--green: #37b679;
|
||||||
@ -41,6 +43,8 @@
|
|||||||
--secondary: white;
|
--secondary: white;
|
||||||
--secondary-2: #f1f3f5;
|
--secondary-2: #f1f3f5;
|
||||||
--hover: rgba(255, 255, 255, 0.075);
|
--hover: rgba(255, 255, 255, 0.075);
|
||||||
|
--hover-1: rgba(255, 255, 255, 0.15);
|
||||||
|
--hover-2: rgba(255, 255, 255, 0.25);
|
||||||
--selection: var(--purple);
|
--selection: var(--purple);
|
||||||
|
|
||||||
--text-base: white;
|
--text-base: white;
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.fit {
|
.fit {
|
||||||
min-height: calc(100vh - 88px - 41px);
|
min-height: calc(100vh - 88px);
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-100"
|
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-150"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
|
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
|
||||||
}}
|
}}
|
||||||
|
@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
return (
|
return (
|
||||||
<footer className={rootClassName}>
|
<footer className={rootClassName}>
|
||||||
<Container>
|
<Container>
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
|
||||||
<div className="col-span-1 lg:col-span-2">
|
<div className="col-span-1 lg:col-span-2">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a className="flex flex-initial items-center font-bold md:mr-24">
|
<a className="flex flex-initial items-center font-bold md:mr-24">
|
||||||
@ -36,21 +36,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
<ul className="flex flex-initial flex-col md:flex-1">
|
<ul className="flex flex-initial flex-col md:flex-1">
|
||||||
<li className="py-3 md:py-0 md:pb-4">
|
<li className="py-3 md:py-0 md:pb-4">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
|
||||||
Home
|
Home
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-3 md:py-0 md:pb-4">
|
<li className="py-3 md:py-0 md:pb-4">
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
|
||||||
Careers
|
Careers
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-3 md:py-0 md:pb-4">
|
<li className="py-3 md:py-0 md:pb-4">
|
||||||
<Link href="/blog">
|
<Link href="/blog">
|
||||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
|
||||||
Blog
|
Blog
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
@ -58,7 +58,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
{sitePages.map((page) => (
|
{sitePages.map((page) => (
|
||||||
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
||||||
<Link href={page.url!}>
|
<Link href={page.url!}>
|
||||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
|
||||||
{page.name}
|
{page.name}
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
@ -71,7 +71,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
|||||||
{legalPages.map((page) => (
|
{legalPages.map((page) => (
|
||||||
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
||||||
<Link href={page.url!}>
|
<Link href={page.url!}>
|
||||||
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
|
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
|
||||||
{page.name}
|
{page.name}
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply h-full bg-primary mx-auto;
|
@apply h-full bg-primary mx-auto transition-colors duration-150;
|
||||||
max-width: 2460px;
|
max-width: 2460px;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { FC, useState } from 'react'
|
import { FC, useEffect, useState } from 'react'
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import { CommerceProvider } from '@lib/bigcommerce'
|
import { CommerceProvider } from '@lib/bigcommerce'
|
||||||
@ -18,13 +18,35 @@ interface Props {
|
|||||||
const Layout: FC<Props> = ({ children, pageProps }) => {
|
const Layout: FC<Props> = ({ children, pageProps }) => {
|
||||||
const { displaySidebar, closeSidebar } = useUI()
|
const { displaySidebar, closeSidebar } = useUI()
|
||||||
const [acceptedCookies, setAcceptedCookies] = useState(false)
|
const [acceptedCookies, setAcceptedCookies] = useState(false)
|
||||||
|
const [hasScrolled, setHasScrolled] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const offset = 0
|
||||||
|
function handleScroll() {
|
||||||
|
const { scrollTop } = document.documentElement
|
||||||
|
if (scrollTop > offset) setHasScrolled(true)
|
||||||
|
else setHasScrolled(false)
|
||||||
|
}
|
||||||
|
document.addEventListener('scroll', handleScroll)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('scroll', handleScroll)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CommerceProvider locale="en-us">
|
<CommerceProvider locale="en-us">
|
||||||
<div className={cn(s.root)}>
|
<div className={cn(s.root)}>
|
||||||
<Container>
|
<header
|
||||||
<Navbar />
|
className={cn(
|
||||||
</Container>
|
'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 show={displaySidebar} close={closeSidebar}>
|
<Sidebar show={displaySidebar} close={closeSidebar}>
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.link {
|
.link {
|
||||||
@apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer;
|
@apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer;
|
||||||
}
|
}
|
||||||
|
@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative text-sm bg-accents-1 text-base w-full',
|
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
@ -9,26 +9,30 @@ interface Props {
|
|||||||
|
|
||||||
const Toggle: FC<Props> = ({ className, checked, onChange }) => {
|
const Toggle: FC<Props> = ({ className, checked, onChange }) => {
|
||||||
return (
|
return (
|
||||||
<Switch checked={checked} onChange={onChange}>
|
<Switch
|
||||||
|
checked={checked}
|
||||||
|
onChange={onChange}
|
||||||
|
className="focus:outline-none"
|
||||||
|
>
|
||||||
<span
|
<span
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
aria-checked="false"
|
aria-checked="false"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
className={`${
|
className={`${
|
||||||
checked ? 'bg-gray-800' : 'bg-gray-200'
|
checked ? 'bg-gray-800' : 'bg-gray-200'
|
||||||
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
|
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-150 focus:outline-none focus:shadow-outline`}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className={`${
|
className={`${
|
||||||
checked ? 'translate-x-5' : 'translate-x-0'
|
checked ? 'translate-x-5' : 'translate-x-0'
|
||||||
} translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
|
} translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-150`}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={`${
|
className={`${
|
||||||
checked
|
checked
|
||||||
? 'opacity-0 ease-out duration-100'
|
? 'opacity-0 ease-out duration-150'
|
||||||
: 'opacity-100 ease-in duration-200'
|
: 'opacity-100 ease-in duration-150'
|
||||||
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||||
>
|
>
|
||||||
<HiSun className="h-3 w-3 text-gray-400" />
|
<HiSun className="h-3 w-3 text-gray-400" />
|
||||||
@ -36,9 +40,9 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
|
|||||||
<span
|
<span
|
||||||
className={`${
|
className={`${
|
||||||
checked
|
checked
|
||||||
? 'opacity-100 ease-in duration-200'
|
? 'opacity-100 ease-in duration-150'
|
||||||
: 'opacity-0 ease-out duration-100'
|
: 'opacity-0 ease-out duration-150'
|
||||||
} opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
} opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||||
>
|
>
|
||||||
<HiMoon className="h-3 w-3 text-yellow-400" />
|
<HiMoon className="h-3 w-3 text-yellow-400" />
|
||||||
</span>
|
</span>
|
||||||
|
@ -26,7 +26,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
|
|||||||
return (
|
return (
|
||||||
<Transition
|
<Transition
|
||||||
show={open}
|
show={open}
|
||||||
enter="transition ease-out duration-100 z-20"
|
enter="transition ease-out duration-150 z-20"
|
||||||
enterFrom="transform opacity-0 scale-95"
|
enterFrom="transform opacity-0 scale-95"
|
||||||
enterTo="transform opacity-100 scale-100"
|
enterTo="transform opacity-100 scale-100"
|
||||||
leave="transition ease-in duration-75"
|
leave="transition ease-in duration-75"
|
||||||
|
@ -10,10 +10,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
|
@apply mr-6 cursor-pointer relative transition ease-in-out duration-150 text-base flex items-center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply text-accents-8 transition scale-110 duration-100;
|
@apply text-accents-8 transition scale-110 duration-150;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
@ -1,22 +1,76 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply relative w-full h-full;
|
@apply relative w-full h-full relative;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
& > div {
|
.leftControl,
|
||||||
overflow: visible !important;
|
.rightControl {
|
||||||
|
@apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftControl {
|
||||||
|
@apply left-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightControl {
|
||||||
|
@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 -translate-x-1/2 transform;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rootPanel {
|
.positionIndicator {
|
||||||
@apply absolute flex flex-row inset-0 z-20 m-20;
|
@apply rounded-full p-2;
|
||||||
|
|
||||||
|
/* :hover .dot {
|
||||||
|
@apply bg-hover-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus .dot {
|
||||||
|
@apply outline-none;
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftPanel {
|
.dot {
|
||||||
@apply flex-1;
|
@apply bg-hover-1 transition w-3 h-3 rounded-full;
|
||||||
cursor: url('/cursor-left.png'), auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rightPanel {
|
.positionIndicator:hover .dot {
|
||||||
@apply flex-1;
|
@apply bg-hover-2;
|
||||||
cursor: url('/cursor-right.png'), auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.positionIndicator:focus {
|
||||||
|
@apply outline-none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicator:focus .dot {
|
||||||
|
@apply shadow-outline-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicatorActive .dot {
|
||||||
|
@apply bg-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicatorActive:hover .dot {
|
||||||
|
@apply bg-white;
|
||||||
|
}
|
||||||
|
/* sx={{
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
bg: currentSlide === idx ? 'primary' : 'gray',
|
||||||
|
borderRadius: 'full',
|
||||||
|
mx: 2,
|
||||||
|
'&:focus': { outline: 'none' },
|
||||||
|
}} */
|
||||||
|
@ -1,36 +1,71 @@
|
|||||||
import React, { FC, useState } from 'react'
|
import { useKeenSlider } from 'keen-slider/react'
|
||||||
import SwipeableViews from 'react-swipeable-views'
|
import React, { Children, FC, isValidElement, useState } from 'react'
|
||||||
|
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
|
||||||
|
import cn from 'classnames'
|
||||||
|
|
||||||
import s from './ProductSlider.module.css'
|
import s from './ProductSlider.module.css'
|
||||||
interface Props {
|
|
||||||
children?: any
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProductSlider: FC<Props> = ({ children }) => {
|
const ProductSlider: FC = ({ children }) => {
|
||||||
const [idx, setIdx] = useState(0)
|
const [currentSlide, setCurrentSlide] = useState(0)
|
||||||
const count = React.Children.count(children)
|
const [isMounted, setIsMounted] = useState(false)
|
||||||
|
|
||||||
const goBack = () => {
|
const [ref, slider] = useKeenSlider<HTMLDivElement>({
|
||||||
idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
|
loop: true,
|
||||||
}
|
slidesPerView: 1,
|
||||||
|
mounted: () => setIsMounted(true),
|
||||||
const goNext = () => {
|
slideChanged(s) {
|
||||||
idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
|
setCurrentSlide(s.details().relativeSlide)
|
||||||
}
|
},
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={s.root}>
|
<div className={s.root}>
|
||||||
<SwipeableViews
|
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
|
||||||
index={idx}
|
<HiChevronLeft />
|
||||||
onChangeIndex={setIdx}
|
</button>
|
||||||
containerStyle={{ overflow: 'visible' }}
|
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
|
||||||
slideStyle={{ overflow: 'visible' }}
|
<HiChevronRight />
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className="keen-slider h-full transition-opacity duration-150"
|
||||||
|
style={{ opacity: isMounted ? 1 : 0 }}
|
||||||
>
|
>
|
||||||
{children}
|
{Children.map(children, (child) => {
|
||||||
</SwipeableViews>
|
// Add the keen-slider__slide className to children
|
||||||
<div className={s.rootPanel}>
|
if (isValidElement(child)) {
|
||||||
<div className={s.leftPanel} onClick={goBack}></div>
|
return {
|
||||||
<div className={s.rightPanel} onClick={goNext}></div>
|
...child,
|
||||||
|
props: {
|
||||||
|
...child.props,
|
||||||
|
className: `${
|
||||||
|
child.props.className ? `${child.props.className} ` : ''
|
||||||
|
}keen-slider__slide`,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return child
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
{slider && (
|
||||||
|
<div className={cn(s.positionIndicatorsContainer)}>
|
||||||
|
{[...Array(slider.details().size).keys()].map((idx) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={idx}
|
||||||
|
className={cn(s.positionIndicator, {
|
||||||
|
[s.positionIndicatorActive]: currentSlide === idx,
|
||||||
|
})}
|
||||||
|
onClick={() => {
|
||||||
|
slider.moveToSlideRelative(idx)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className={s.dot} />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply relative grid items-start gap-8 grid-cols-1;
|
@apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
@apply grid-cols-12 pt-10;
|
@apply grid-cols-12;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -17,24 +17,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
@apply mx-0 col-span-7;
|
@apply mx-0 col-span-6;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareBg {
|
.squareBg {
|
||||||
@apply absolute inset-0 bg-violet z-0;
|
@apply absolute inset-0 bg-violet z-0 h-full;
|
||||||
max-height: 250px;
|
|
||||||
|
|
||||||
@screen md {
|
|
||||||
@apply inset-20;
|
|
||||||
max-height: 500px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nameBox {
|
.nameBox {
|
||||||
@apply absolute top-6 left-10 z-10;
|
@apply absolute top-6 left-6 z-20;
|
||||||
|
|
||||||
& .name {
|
& .name {
|
||||||
@apply px-6 py-2 bg-primary text-primary font-bold;
|
@apply px-6 py-2 bg-primary text-primary font-bold;
|
||||||
@ -46,20 +40,19 @@
|
|||||||
@apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
|
@apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
|
||||||
}
|
}
|
||||||
|
|
||||||
@screen md {
|
@screen lg {
|
||||||
& .name,
|
& .name,
|
||||||
& .price {
|
& .price {
|
||||||
@apply bg-violet-light text-white;
|
@apply bg-hover-1 text-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@apply flex flex-col col-span-1;
|
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
@apply col-span-5;
|
@apply col-span-5 pl-12 pt-20;
|
||||||
padding-top: 5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,20 +61,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
@apply w-full h-full object-cover;
|
@apply w-full h-auto max-h-full object-cover;
|
||||||
|
|
||||||
@screen md {
|
|
||||||
height: 100%;
|
|
||||||
margin-top: -2.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@screen lg {
|
|
||||||
height: 100%;
|
|
||||||
margin-top: -8%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wishlistButton {
|
||||||
|
@apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
@apply right-12 text-white bg-violet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -9,6 +9,8 @@ import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
|||||||
import { isDesktop } from '@lib/browser'
|
import { isDesktop } from '@lib/browser'
|
||||||
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
|
||||||
children?: any
|
children?: any
|
||||||
@ -46,7 +48,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container className="max-w-none w-full" clean>
|
||||||
<NextSeo
|
<NextSeo
|
||||||
title={product.name}
|
title={product.name}
|
||||||
description={product.description}
|
description={product.description}
|
||||||
@ -88,12 +90,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
))}
|
))}
|
||||||
</ProductSlider>
|
</ProductSlider>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!validMedia && (
|
|
||||||
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
|
|
||||||
<img src="/slider-arrows.png" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={s.sidebar}>
|
<div className={s.sidebar}>
|
||||||
@ -143,6 +139,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* TODO make it work */}
|
||||||
|
<div className={s.wishlistButton}>
|
||||||
|
<Heart />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
|
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
|
||||||
items-center justify-center cursor-pointer transition duration-100 ease-in-out
|
items-center justify-center cursor-pointer transition duration-150 ease-in-out
|
||||||
p-0 shadow-none border-gray-200 border box-border;
|
p-0 shadow-none border-gray-200 border box-border;
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
@ -13,7 +13,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.color {
|
.color {
|
||||||
@apply text-black transition duration-100 ease-in-out;
|
@apply text-black transition duration-150 ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@apply text-black;
|
@apply text-black;
|
||||||
|
@ -5,10 +5,11 @@ interface Props {
|
|||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
el?: HTMLElement
|
el?: HTMLElement
|
||||||
|
clean?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
|
const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
|
||||||
const rootClassName = cn('mx-auto max-w-8xl px-12', className)
|
const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
|
||||||
|
|
||||||
let Component: React.ComponentType<React.HTMLAttributes<
|
let Component: React.ComponentType<React.HTMLAttributes<
|
||||||
HTMLDivElement
|
HTMLDivElement
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"cookie": "^0.4.1",
|
"cookie": "^0.4.1",
|
||||||
"js-cookie": "^2.2.1",
|
"js-cookie": "^2.2.1",
|
||||||
|
"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.9",
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import '@assets/main.css'
|
import '@assets/main.css'
|
||||||
|
import 'keen-slider/keen-slider.min.css'
|
||||||
|
|
||||||
// To be removed
|
// To be removed
|
||||||
import 'animate.css'
|
import 'animate.css'
|
||||||
|
@ -63,7 +63,7 @@ export default function Home({
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-3">
|
<div>
|
||||||
<Grid>
|
<Grid>
|
||||||
{featured.slice(0, 3).map(({ node }) => (
|
{featured.slice(0, 3).map(({ node }) => (
|
||||||
<ProductCard key={node.path} product={node} />
|
<ProductCard key={node.path} product={node} />
|
||||||
@ -96,7 +96,7 @@ export default function Home({
|
|||||||
</Marquee>
|
</Marquee>
|
||||||
<div className="py-12 flex flex-row w-full px-12">
|
<div className="py-12 flex flex-row w-full px-12">
|
||||||
<div className="pr-3 w-48 relative">
|
<div className="pr-3 w-48 relative">
|
||||||
<div className="sticky top-2">
|
<div className="sticky top-32">
|
||||||
<ul className="mb-10">
|
<ul className="mb-10">
|
||||||
<li className="py-1 text-base font-bold tracking-wide">
|
<li className="py-1 text-base font-bold tracking-wide">
|
||||||
All Categories
|
All Categories
|
||||||
|
@ -18,6 +18,8 @@ module.exports = {
|
|||||||
secondary: 'var(--secondary)',
|
secondary: 'var(--secondary)',
|
||||||
'secondary-2': 'var(--secondary-2)',
|
'secondary-2': 'var(--secondary-2)',
|
||||||
hover: 'var(--hover)',
|
hover: 'var(--hover)',
|
||||||
|
'hover-1': 'var(--hover-1)',
|
||||||
|
'hover-2': 'var(--hover-2)',
|
||||||
'accents-0': 'var(--accents-0)',
|
'accents-0': 'var(--accents-0)',
|
||||||
'accents-1': 'var(--accents-1)',
|
'accents-1': 'var(--accents-1)',
|
||||||
'accents-2': 'var(--accents-2)',
|
'accents-2': 'var(--accents-2)',
|
||||||
@ -41,6 +43,10 @@ module.exports = {
|
|||||||
primary: 'var(--text-primary)',
|
primary: 'var(--text-primary)',
|
||||||
secondary: 'var(--text-secondary)',
|
secondary: 'var(--text-secondary)',
|
||||||
},
|
},
|
||||||
|
boxShadow: {
|
||||||
|
magical:
|
||||||
|
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {},
|
variants: {},
|
||||||
|
@ -5399,6 +5399,11 @@ jws@^3.2.2:
|
|||||||
jwa "^1.4.1"
|
jwa "^1.4.1"
|
||||||
safe-buffer "^5.0.1"
|
safe-buffer "^5.0.1"
|
||||||
|
|
||||||
|
keen-slider@^5.2.4:
|
||||||
|
version "5.2.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
|
||||||
|
integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
|
||||||
|
|
||||||
keycode@^2.1.7:
|
keycode@^2.1.7:
|
||||||
version "2.2.0"
|
version "2.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
|
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user