forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
b86ab71cef
@ -5,11 +5,24 @@
|
|||||||
--bg-primary-hover: rgba(0, 0, 0, 0.075);
|
--bg-primary-hover: rgba(0, 0, 0, 0.075);
|
||||||
--bg-primary-accent: #f1f3f5;
|
--bg-primary-accent: #f1f3f5;
|
||||||
--bg-secondary: black;
|
--bg-secondary: black;
|
||||||
|
|
||||||
--text-primary: black;
|
--text-primary: black;
|
||||||
--text-secondary: white;
|
--text-secondary: white;
|
||||||
|
|
||||||
--text-default: #252f3f;
|
--text-default: #252f3f;
|
||||||
|
|
||||||
|
--cyan: #50e3c2;
|
||||||
|
--purple: #f81ce5;
|
||||||
|
|
||||||
|
--foreground: #000;
|
||||||
|
--background: #fff;
|
||||||
|
--selection: var(--cyan);
|
||||||
|
--accents-1: #fafafa;
|
||||||
|
--accents-2: #eaeaea;
|
||||||
|
--accents-3: #999999;
|
||||||
|
--accents-4: #888888;
|
||||||
|
--accents-5: #666666;
|
||||||
|
--accents-6: #444444;
|
||||||
|
--accents-7: #333333;
|
||||||
|
--accents-8: #111111;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme='dark'] {
|
[data-theme='dark'] {
|
||||||
@ -17,11 +30,21 @@
|
|||||||
--bg-secondary: white;
|
--bg-secondary: white;
|
||||||
--bg-primary-hover: rgba(255, 255, 255, 0.075);
|
--bg-primary-hover: rgba(255, 255, 255, 0.075);
|
||||||
--bg-primary-accent: #111;
|
--bg-primary-accent: #111;
|
||||||
|
|
||||||
--text-primary: white;
|
--text-primary: white;
|
||||||
--text-secondary: black;
|
--text-secondary: black;
|
||||||
|
|
||||||
--text-default: white;
|
--text-default: white;
|
||||||
|
|
||||||
|
--foreground: #fff;
|
||||||
|
--background: #000;
|
||||||
|
--selection: var(--purple);
|
||||||
|
--accents-8: #fafafa;
|
||||||
|
--accents-7: #eaeaea;
|
||||||
|
--accents-6: #999999;
|
||||||
|
--accents-5: #888888;
|
||||||
|
--accents-4: #666666;
|
||||||
|
--accents-3: #444444;
|
||||||
|
--accents-2: #333333;
|
||||||
|
--accents-1: #111111;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fit {
|
.fit {
|
||||||
|
@ -7,3 +7,11 @@
|
|||||||
.quantity::-webkit-inner-spin-button {
|
.quantity::-webkit-inner-spin-button {
|
||||||
@apply appearance-none m-0;
|
@apply appearance-none m-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.productImage {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -10px;
|
||||||
|
top: 15px;
|
||||||
|
transform: scale(1.9);
|
||||||
|
}
|
||||||
|
@ -3,7 +3,7 @@ import usePrice from '@lib/bigcommerce/use-price'
|
|||||||
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
||||||
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
|
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
|
||||||
import { ChangeEvent, useEffect, useState } from 'react'
|
import { ChangeEvent, useEffect, useState } from 'react'
|
||||||
import styles from './CartItem.module.css'
|
import s from './CartItem.module.css'
|
||||||
|
|
||||||
const CartItem = ({
|
const CartItem = ({
|
||||||
item,
|
item,
|
||||||
@ -53,9 +53,13 @@ const CartItem = ({
|
|||||||
}
|
}
|
||||||
}, [item.quantity])
|
}, [item.quantity])
|
||||||
|
|
||||||
|
console.log(item)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="flex flex-row space-x-6 py-6">
|
<li className="flex flex-row space-x-8 py-6">
|
||||||
<div className="h-12 w-12 bg-violet"></div>
|
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
||||||
|
<img className={s.productImage} src={item.image_url} />
|
||||||
|
</div>
|
||||||
<div className="flex-1 flex flex-col justify-between text-primary">
|
<div className="flex-1 flex flex-col justify-between text-primary">
|
||||||
<span className="font-bold mb-3">{item.name}</span>
|
<span className="font-bold mb-3">{item.name}</span>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
@ -66,7 +70,7 @@ const CartItem = ({
|
|||||||
type="number"
|
type="number"
|
||||||
max={99}
|
max={99}
|
||||||
min={0}
|
min={0}
|
||||||
className={styles.quantity}
|
className={s.quantity}
|
||||||
value={quantity}
|
value={quantity}
|
||||||
onChange={handleQuantity}
|
onChange={handleQuantity}
|
||||||
onBlur={handleBlur}
|
onBlur={handleBlur}
|
||||||
|
@ -61,13 +61,16 @@ const CartSidebarView: FC = () => {
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
{isEmpty ? (
|
{isEmpty ? (
|
||||||
<div className="flex-1 px-4 flex flex-col justify-center items-center">
|
<div className="flex-1 px-4 flex flex-col justify-center items-center ">
|
||||||
<span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16">
|
<span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
|
||||||
<Bag />
|
<Bag className="absolute" />
|
||||||
</span>
|
</span>
|
||||||
<h2 className="pt-6 text-xl font-light text-center">
|
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
|
||||||
Your cart is empty.
|
Your cart is empty
|
||||||
</h2>
|
</h2>
|
||||||
|
<p className="text-accents-3 px-10 text-center pt-2">
|
||||||
|
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : error ? (
|
) : error ? (
|
||||||
<div className="flex-1 px-4 flex flex-col justify-center items-center">
|
<div className="flex-1 px-4 flex flex-col justify-center items-center">
|
||||||
|
@ -8,7 +8,7 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getRandomPairOfColors() {
|
function getRandomPairOfColors() {
|
||||||
const colors = ['#f33', '#7928ca', '#50e3c2', '#7928ca', '#7928CA']
|
const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
|
||||||
const getRandomIdx = () => random(0, colors.length - 1)
|
const getRandomIdx = () => random(0, colors.length - 1)
|
||||||
let idx = getRandomIdx()
|
let idx = getRandomIdx()
|
||||||
let idx2 = getRandomIdx()
|
let idx2 = getRandomIdx()
|
||||||
@ -27,7 +27,7 @@ const Avatar: FC<Props> = ({}) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="inline-block h-8 w-8 rounded-full border border-accent-8"
|
className="inline-block h-8 w-8 rounded-full border-2 border-accents-2"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
|
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
|
||||||
}}
|
}}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.input {
|
.input {
|
||||||
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg placeholder-accent-4 pr-10;
|
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg placeholder-accents-4 pr-10;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ import { FC, useState } from 'react'
|
|||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
import { Colors } from '@components/ui/types'
|
import { Colors } from '@components/ui/types'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { Button, Container } from '@components/ui'
|
import { Button, Container, LoadingDots } from '@components/ui'
|
||||||
import { Swatch, ProductSlider } from '@components/product'
|
import { Swatch, ProductSlider } from '@components/product'
|
||||||
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||||
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
||||||
@ -25,18 +25,28 @@ const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
|
|||||||
const ProductView: FC<Props> = ({ product, className }) => {
|
const ProductView: FC<Props> = ({ product, className }) => {
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
|
|
||||||
const [choices, setChoices] = useState<Choices>({
|
const [choices, setChoices] = useState<Choices>({
|
||||||
size: null,
|
size: null,
|
||||||
color: null,
|
color: null,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
const addToCart = async () => {
|
const addToCart = async () => {
|
||||||
// TODO: loading state by awating the promise
|
setLoading(true)
|
||||||
await addItem({
|
|
||||||
productId: product.entityId,
|
try {
|
||||||
variantId: product.variants.edges?.[0]?.node.entityId!,
|
await addItem({
|
||||||
})
|
productId: product.entityId,
|
||||||
openSidebar()
|
variantId: product.variants.edges?.[0]?.node.entityId!,
|
||||||
|
})
|
||||||
|
openSidebar()
|
||||||
|
setLoading(false)
|
||||||
|
} catch (err) {
|
||||||
|
// Error err.
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const activeSize = choices.size
|
const activeSize = choices.size
|
||||||
@ -75,11 +85,16 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
<div className="flex-1 px-24 pb-0 relative fit box-border">
|
<div className="flex-1 px-24 pb-0 relative fit box-border">
|
||||||
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
||||||
<ProductSlider>
|
<ProductSlider>
|
||||||
{product.images.edges?.map((image) => (
|
{product.images.edges?.map((image, i) => (
|
||||||
<img className="w-full object-cover" src={image?.node.urlXL} />
|
<img
|
||||||
|
className="w-full object-cover"
|
||||||
|
src={image?.node.urlXL}
|
||||||
|
loading={i === 0 ? 'eager' : 'lazy'}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</ProductSlider>
|
</ProductSlider>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
|
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
|
||||||
<img src="/slider-arrows.png" />
|
<img src="/slider-arrows.png" />
|
||||||
</div>
|
</div>
|
||||||
@ -128,7 +143,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section className="">
|
<section className="">
|
||||||
<Button type="button" className={s.button} onClick={addToCart}>
|
<Button
|
||||||
|
type="button"
|
||||||
|
className={s.button}
|
||||||
|
onClick={addToCart}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
Add to Cart
|
Add to Cart
|
||||||
</Button>
|
</Button>
|
||||||
</section>
|
</section>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
@apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
|
@apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
|
||||||
bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
|
bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
|
||||||
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
|
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
|
||||||
border border-transparent;
|
border border-transparent items-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:hover {
|
.root:hover {
|
||||||
@ -17,6 +17,6 @@
|
|||||||
@apply bg-gray-600;
|
@apply bg-gray-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
s.filled {
|
.loading {
|
||||||
@apply text-white bg-black;
|
@apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,7 @@ import React, {
|
|||||||
import mergeRefs from 'react-merge-refs'
|
import mergeRefs from 'react-merge-refs'
|
||||||
import { useButton } from 'react-aria'
|
import { useButton } from 'react-aria'
|
||||||
import s from './Button.module.css'
|
import s from './Button.module.css'
|
||||||
|
import { LoadingDots } from '@components/ui'
|
||||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
href?: string
|
href?: string
|
||||||
className?: string
|
className?: string
|
||||||
@ -17,6 +17,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|||||||
type?: 'submit' | 'reset' | 'button'
|
type?: 'submit' | 'reset' | 'button'
|
||||||
Component?: string | JSXElementConstructor<any>
|
Component?: string | JSXElementConstructor<any>
|
||||||
width?: string | number
|
width?: string | number
|
||||||
|
loading?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||||
@ -30,6 +31,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
disabled,
|
disabled,
|
||||||
width,
|
width,
|
||||||
Component = 'button',
|
Component = 'button',
|
||||||
|
loading = false,
|
||||||
...rest
|
...rest
|
||||||
} = props
|
} = props
|
||||||
const ref = useRef<typeof Component>(null)
|
const ref = useRef<typeof Component>(null)
|
||||||
@ -47,7 +49,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
{
|
{
|
||||||
[s.filled]: variant === 'filled',
|
[s.loading]: loading,
|
||||||
},
|
},
|
||||||
className
|
className
|
||||||
)
|
)
|
||||||
@ -66,6 +68,11 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
data-active={isPressed ? '' : undefined}
|
data-active={isPressed ? '' : undefined}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
{loading && (
|
||||||
|
<i className="pl-2 m-0 flex">
|
||||||
|
<LoadingDots />
|
||||||
|
</i>
|
||||||
|
)}
|
||||||
</Component>
|
</Component>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
32
components/ui/LoadingDots/LoadingDots.module.css
Normal file
32
components/ui/LoadingDots/LoadingDots.module.css
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
@keyframes blink {
|
||||||
|
0% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
@apply inline-flex text-center items-center leading-7;
|
||||||
|
|
||||||
|
& span {
|
||||||
|
@apply bg-accents-6 rounded-full h-2 w-2;
|
||||||
|
animation-name: blink;
|
||||||
|
animation-duration: 1.4s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
margin: 0 2px;
|
||||||
|
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
13
components/ui/LoadingDots/LoadingDots.tsx
Normal file
13
components/ui/LoadingDots/LoadingDots.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import s from './LoadingDots.module.css'
|
||||||
|
|
||||||
|
const LoadingDots: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<span className={s.loading}>
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoadingDots
|
1
components/ui/LoadingDots/index.ts
Normal file
1
components/ui/LoadingDots/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './LoadingDots'
|
@ -1,7 +1,8 @@
|
|||||||
export { default as Button } from './Button'
|
export { default as Hero } from './Hero'
|
||||||
export { default as Container } from './Container'
|
|
||||||
export { default as Sidebar } from './Sidebar'
|
|
||||||
export { default as Logo } from './Logo'
|
export { default as Logo } from './Logo'
|
||||||
export { default as Grid } from './Grid'
|
export { default as Grid } from './Grid'
|
||||||
|
export { default as Button } from './Button'
|
||||||
|
export { default as Sidebar } from './Sidebar'
|
||||||
export { default as Marquee } from './Marquee'
|
export { default as Marquee } from './Marquee'
|
||||||
export { default as Hero } from './Hero'
|
export { default as Container } from './Container'
|
||||||
|
export { default as LoadingDots } from './LoadingDots'
|
||||||
|
@ -14,11 +14,14 @@ module.exports = {
|
|||||||
075: '0.75',
|
075: '0.75',
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
'accent-1': '#FAFAFA',
|
'accents-1': 'var(--accents-1)',
|
||||||
'accent-2': '#F1F3F5',
|
'accents-2': 'var(--accents-2)',
|
||||||
'accent-4': '#888',
|
'accents-3': 'var(--accents-3)',
|
||||||
'accent-6': '#E5E5E5',
|
'accents-4': 'var(--accents-4)',
|
||||||
'accent-8': '#111111',
|
'accents-5': 'var(--accents-5)',
|
||||||
|
'accents-6': 'var(--accents-6)',
|
||||||
|
'accents-7': 'var(--accents-7)',
|
||||||
|
'accents-8': 'var(--accents-8)',
|
||||||
violet: '#7928CA',
|
violet: '#7928CA',
|
||||||
pink: '#FF0080',
|
pink: '#FF0080',
|
||||||
cyan: '#50E3C2',
|
cyan: '#50E3C2',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user