cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Merge branch 'master' of https://github.com/okbel/e-comm-example

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-13 18:52:25 -05:00
commit cc01b81e45
23 changed files with 111 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/global.css
View File

@ -2,8 +2,9 @@
:root {
--bg-primary: white;
--bg-primary-hover: rgba(0, 0, 0, 0.075);
--bg-primary-accent: #f1f3f5;
--bg-secondary: black;
--bg-primary-accent: rgba(0, 0, 0, 0.075);
--text-primary: black;
--text-secondary: white;
@ -14,7 +15,8 @@
[data-theme='dark'] {
--bg-primary: black;
--bg-secondary: white;
--bg-primary-accent: rgba(255, 255, 255, 0.075);
--bg-primary-hover: rgba(255, 255, 255, 0.075);
--bg-primary-accent: #111;
--text-primary: white;
--text-secondary: black;

2
components/cart/CartItem/CartItem.module.css
View File

@ -1,6 +1,6 @@
.quantity {
appearance: textfield;
@apply w-8 border-gray-300 border mx-3 rounded text-center text-sm;
@apply w-8 border-gray-300 border mx-3 rounded text-center text-sm text-black;
}
.quantity::-webkit-outer-spin-button,

6
components/cart/CartItem/CartItem.tsx
View File

@ -56,8 +56,8 @@ const CartItem = ({
return (
<li className="flex flex-row space-x-6 py-6">
<div className="h-12 w-12 bg-violet"></div>
<div className="flex-1 flex flex-col justify-between">
<span>{item.name}</span>
<div className="flex-1 flex flex-col justify-between text-primary">
<span className="font-bold mb-3">{item.name}</span>
<div className="flex items-center">
<button type="button" onClick={() => increaseQuantity(-1)}>
<Minus width={18} height={18} />
@ -76,7 +76,7 @@ const CartItem = ({
</button>
</div>
</div>
<div className="flex flex-col justify-between space-y-2">
<div className="flex flex-col justify-between space-y-2 text-primary">
<span>{price}</span>
<button
className="flex justify-end"

2
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -38,7 +38,7 @@ const CartSidebarView: FC = () => {
return (
<div
className={cn('h-full flex flex-col', {
'bg-black text-white': isEmpty,
'bg-white text-black': isEmpty,
'bg-red text-white': error,
'bg-green text-white': success,
})}

2
components/core/Featurebar/Featurebar.module.css
View File

@ -1,5 +1,5 @@
.separator {
@apply mx-3 bg-gray-400;
@apply mx-3 bg-secondary;
width: 1px;
height: 20px;
}

2
components/core/Featurebar/Featurebar.tsx
View File

@ -10,7 +10,7 @@ interface Props {
const Featurebar: FC<Props> = ({ title, description, className }) => {
const rootClassName = cn(
'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium',
'hidden py-2 px-6 bg-primary-accent text-primary text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-primary-accent',
className
)
return (

2
components/core/Searchbar/Searchbar.module.css
View File

@ -1,5 +1,5 @@
.input {
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 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-accent-4 pr-10;
min-width: 300px;
}

2
components/core/Searchbar/Searchbar.tsx
View File

@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
return (
<div
className={cn(
'relative rounded-lg text-sm bg-accent-2 text-gray-600 w-full',
'relative rounded-lg text-sm bg-primary-accent text-primary w-full',
className
)}
>

10
components/core/UserNav/UserNav.tsx
View File

@ -5,7 +5,7 @@ import { Avatar } from '@components/core'
import { Heart, Bag } from '@components/icon'
import { useUI } from '@components/ui/context'
import s from './UserNav.module.css'
import Link from 'next/link'
interface Props {
className?: string
}
@ -34,9 +34,11 @@ const UserNav: FC<Props> = ({ className }) => {
</span>
)}
</li>
<li className={s.item}>
<Heart />
</li>
<Link href="/wishlist">
<li className={s.item}>
<Heart />
</li>
</Link>
<li className={s.item}>
<Avatar />
</li>

2
components/icon/Minus.tsx
View File

@ -3,7 +3,7 @@ const Minus = ({ ...props }) => {
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
<path
d="M5 12H19"
stroke="black"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"

4
components/icon/Plus.tsx
View File

@ -3,14 +3,14 @@ const Plus = ({ ...props }) => {
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
<path
d="M12 5V19"
stroke="black"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M5 12H19"
stroke="black"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"

2
components/product/ProductView/ProductView.tsx
View File

@ -44,7 +44,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
return (
<Container>
<div className="relative flex flex-row items-start overflow-hidden fit">
<div className="relative flex flex-row items-start overflow-hidden fit my-12">
<div className="absolute top-0 left-0 z-50">
<h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
{product.name}

4
components/product/Swatch/Swatch.module.css
View File

@ -1,7 +1,7 @@
.root {
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-75 ease-in-out
p-0 shadow-none border-gray-200 border;
p-0 shadow-none border-gray-200 border box-border;
}
.active.size {
@ -9,7 +9,7 @@
}
.root:hover {
@apply transform scale-110 bg-primary-accent;
@apply transform scale-110 bg-primary-hover;
}
.colorViolet {

5
components/ui/Button/Button.module.css
View File

@ -1,11 +1,12 @@
.root {
@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
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;
}
.root:hover {
@apply bg-gray-800;
@apply bg-primary-accent text-primary border border-secondary;
}
.root:focus {

2
components/ui/Hero/Hero.tsx
View File

@ -9,7 +9,7 @@ interface Props {
}
const Hero: FC<Props> = ({ headline, description, className }) => {
const rootClassName = cn('bg-black py-12 px-4 md:px-6', className)
const rootClassName = cn('bg-black py-12', className)
return (
<div className={rootClassName}>
<Container>

4
components/ui/Logo/Logo.tsx
View File

@ -6,12 +6,12 @@ const Logo = () => (
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="32" height="32" rx="16" fill="black" />
<rect width="32" height="32" rx="16" fill="var(--bg-secondary)" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
fill="white"
fill="var(--bg-primary)"
/>
</svg>
)

4
components/ui/Sidebar/Sidebar.tsx
View File

@ -72,8 +72,8 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="h-full w-screen max-w-md">
<div className="h-full flex flex-col text-primary bg-primary shadow-xl overflow-y-auto">
<div className="h-full w-screen max-w-lg">
<div className="h-full flex flex-col text-primary bg-primary-accent shadow-xl overflow-y-auto">
{children}
</div>
</div>

21
components/wishlist/WishlistCard/WishlistCard.module.css Normal file
View File

@ -0,0 +1,21 @@
.root {
@apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-hover;
&:nth-child(3n + 1) {
& .productBg {
@apply bg-violet;
}
}
&:nth-child(3n + 2) {
& .productBg {
@apply bg-pink;
}
}
&:nth-child(3n + 3) {
& .productBg {
@apply bg-blue;
}
}
}

41
components/wishlist/WishlistCard/WishlistCard.tsx Normal file
View File

@ -0,0 +1,41 @@
import { FC } from 'react'
import { Trash } from '@components/icon'
import s from './WishlistCard.module.css'
interface Props {
className?: string
children?: any
data?: ProductData
}
interface ProductData {
name: string
images: any
prices: any
path: string
}
const WishlistCard: FC<Props> = ({ className, data }) => {
return (
<div className={s.root}>
<div className={`col-span-3 ${s.productBg}`} />
<div className="col-span-7">
<h3 className="text-2xl mb-2">Jacket</h3>
<p className="mb-4">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
<button className="py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover">
Add to cart
</button>
</div>
<div className="col-span-2 flex flex-col justify-between">
<div className="flex justify-end font-bold">$ 50.00</div>
<div className="flex justify-end">
<Trash />
</div>
</div>
</div>
)
}
export default WishlistCard

1
components/wishlist/WishlistCard/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './WishlistCard'

1
components/wishlist/index.ts Normal file
View File

@ -0,0 +1 @@
export { default as WishlistCard } from './WishlistCard'

16
pages/wishlist.tsx
View File

@ -2,6 +2,8 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
import { Layout } from '@components/core'
import { Container } from '@components/ui'
import { WishlistCard } from '@components/wishlist'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
export async function getStaticProps({ preview }: GetStaticPropsContext) {
@ -19,9 +21,6 @@ export default function Home({
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<Container>
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
My Wishlist
</h2>
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
@ -35,7 +34,16 @@ export default function Home({
))}
</ul>
</div>
<div className="col-span-8">Items.</div>
<div className="col-span-8">
<h2 className="pt-1 px-3 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
My Wishlist
</h2>
<div className="group flex flex-col">
{[1, 2, 3, 4, 5, 6].map((i) => (
<WishlistCard />
))}
</div>
</div>
<div className="col-span-2">
<ul>
<li className="py-1 text-primary font-bold tracking-wide">

2
tailwind.config.js
View File

@ -17,6 +17,7 @@ module.exports = {
'accent-1': '#FAFAFA',
'accent-2': '#F1F3F5',
'accent-4': '#888',
'accent-8': '#111111',
violet: '#7928CA',
pink: '#FF0080',
cyan: '#50E3C2',
@ -26,6 +27,7 @@ module.exports = {
primary: 'var(--bg-primary)',
secondary: 'var(--bg-secondary)',
'primary-accent': 'var(--bg-primary-accent)',
'primary-hover': 'var(--bg-primary-hover)',
},
textColor: {
base: 'var(--text-primary)',