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-05 12:36:04 -05:00
commit 84e66fca2f
9 changed files with 179 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/core/Navbar/Navbar.module.css
View File

@ -1,3 +1,7 @@
.root {
@apply flex justify-between items-center flex-row px-6 h-20 relative;
}
.link {
@apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer;
}

15
components/core/Navbar/Navbar.tsx
View File

@ -4,6 +4,7 @@ import s from './Navbar.module.css'
import { Logo, Container } from '@components/ui'
import { Searchbar } from '@components/core'
import { UserNav } from '@components/core'
import Link from 'next/link'
interface Props {
className?: string
}
@ -12,12 +13,16 @@ const Navbar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className)
return (
<Container className={rootClassName}>
<Logo />
<Link href="/">
<h1 className="inline-block cursor-pointer">
<Logo />
</h1>
</Link>
<div className="flex flex-row h-full content-center flex-1 ml-10">
<nav className="hidden flex-row items-center px-3 lg:flex">
<a className="pr-4">All</a>
<a className="pr-4">Clothes</a>
<a>Accesories</a>
<nav className="hidden flex-row items-center px-6 lg:flex space-x-4">
<a className={s.link}>All</a>
<a className={s.link}>Clothes</a>
<a className={s.link}>Accesories</a>
</nav>
<Searchbar />
</div>

2
components/icon/Heart.tsx
View File

@ -10,7 +10,7 @@ const Heart = ({ ...props }) => {
>
<path
d="M20.84 2.61C20.3292 2.099 19.7228 1.69365 19.0554 1.41708C18.3879 1.14052 17.6725 0.998175 16.95 0.998175C16.2275 0.998175 15.5121 1.14052 14.8446 1.41708C14.1772 1.69365 13.5708 2.099 13.06 2.61L12 3.67L10.94 2.61C9.9083 1.57831 8.50903 0.998709 7.05 0.998709C5.59096 0.998709 4.19169 1.57831 3.16 2.61C2.1283 3.64169 1.54871 5.04097 1.54871 6.5C1.54871 7.95903 2.1283 9.35831 3.16 10.39L4.22 11.45L12 19.23L19.78 11.45L20.84 10.39C21.351 9.87924 21.7563 9.27281 22.0329 8.60536C22.3095 7.9379 22.4518 7.22249 22.4518 6.5C22.4518 5.77751 22.3095 5.0621 22.0329 4.39464C21.7563 3.72719 21.351 3.12076 20.84 2.61V2.61Z"
stroke="black"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"

64
components/product/ProductCard/ProductCard.module.css
View File

@ -1,9 +1,67 @@
.root {
@apply relative w-full p-6 box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear;
&:hover {
@apply cursor-pointer;
& .squareBg {
@apply inset-10;
}
& .productTitle,
& .productPrice,
& .wishlistButton {
@apply bg-black text-white;
}
&:nth-child(6n + 1) .productTitle,
&:nth-child(6n + 1) .productPrice,
&:nth-child(6n + 1) .wishlistButton {
@apply bg-violet text-white;
}
&:nth-child(6n + 5) .productTitle,
&:nth-child(6n + 5) .productPrice,
&:nth-child(6n + 5) .wishlistButton {
@apply bg-blue text-white;
}
&:nth-child(6n + 3) .productTitle,
&:nth-child(6n + 3) .productPrice,
&:nth-child(6n + 3) .wishlistButton {
@apply bg-pink text-white;
}
&:nth-child(6n + 6) .productTitle,
&:nth-child(6n + 6) .productPrice,
&:nth-child(6n + 6) .wishlistButton {
@apply bg-cyan text-black;
}
}
&:nth-child(6n + 1) .squareBg {
@apply bg-violet;
}
&:nth-child(6n + 5) .squareBg {
@apply bg-blue;
}
&:nth-child(6n + 3) .squareBg {
@apply bg-pink;
}
&:nth-child(6n + 6) .squareBg {
@apply bg-cyan;
}
}
.squareBg {
@apply cursor-pointer absolute inset-0 z-0 transition-all duration-75 ease-in-out bg-black;
}
.productTitle {
@apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex;
@apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex transition ease-linear;
max-width: calc(100% - 50px);
@screen lg {
@ -12,9 +70,9 @@
}
.productPrice {
@apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6;
@apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6 transition ease-linear;
}
.wishlistButton {
@apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
@apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer transition ease-linear;
}

44
components/product/ProductCard/ProductCard.tsx
View File

@ -2,7 +2,8 @@ import cn from 'classnames'
import s from './ProductCard.module.css'
import { FC } from 'react'
import { Heart } from '@components/icon'
import { url } from 'inspector'
import Link from 'next/link'
interface Props {
className?: string
children?: any
@ -13,34 +14,39 @@ interface ProductData {
name: string
images: any
prices: any
path: string
}
const ProductCard: FC<Props> = ({ className, node: productData }) => {
const rootClassName = cn(s.root, className)
return (
<div
className={rootClassName}
style={{
backgroundImage: `url('${productData.images.edges[0].node.urlSmall}')`,
}}
>
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col flex-1 overflow-hidden">
<div className="flex-1">
<h1 className={s.productTitle}>{productData.name}</h1>
</div>
<div className="flex-0">
<div className={s.productPrice}>
${productData.prices.price.value}
<Link href={`product${productData.path}`}>
<div className={rootClassName}>
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover"
src={productData.images.edges[0].node.urlSmall}
/>
</div>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col flex-1 overflow-hidden">
<div className="flex-1">
<h1 className={s.productTitle}>{productData.name}</h1>
</div>
<div className="flex-0">
<div className={s.productPrice}>
${productData.prices.price.value}
</div>
</div>
</div>
</div>
<div className={s.wishlistButton}>
<Heart />
<div className={s.wishlistButton}>
<Heart />
</div>
</div>
</div>
</div>
</Link>
)
}

112
components/ui/Grid/Grid.module.css
View File

@ -3,7 +3,7 @@
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
& > * {
@apply row-span-1 lg:col-span-1 bg-black box-border overflow-hidden;
@apply row-span-1 lg:col-span-1 bg-transparent box-border overflow-hidden;
height: 500px;
max-height: 800px;
@ -13,83 +13,115 @@
}
}
.default {
& > * {
@apply bg-transparent;
}
}
.layoutNormal {
@apply gap-6;
& > * {
min-height: 325px;
@apply bg-white;
}
}
.layoutA {
& > div:nth-child(6n + 1),
& > div:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2 bg-violet;
& > *:nth-child(6n + 1),
& > *:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(6n + 5) {
@apply bg-blue;
}
&.filled {
& > *:nth-child(6n + 1),
& > *:nth-child(6n + 5) {
@apply bg-violet;
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 5) {
@apply bg-blue;
}
& > div:nth-child(6n + 6) {
@apply bg-cyan;
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 6) {
@apply bg-cyan;
}
}
}
.layoutB {
& > div:nth-child(6n + 2) {
@apply row-span-2 lg:col-span-2 bg-blue;
& > *:nth-child(6n + 2),
& > *:nth-child(6n + 4) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(6n + 4) {
@apply row-span-2 lg:col-span-2 bg-violet;
height: var(--row-height);
}
&.filled {
& > *:nth-child(6n + 2) {
@apply bg-blue;
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 4) {
@apply bg-violet;
}
& > div:nth-child(6n + 6) {
@apply bg-cyan;
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 6) {
@apply bg-cyan;
}
}
}
.layoutC {
& > div:nth-child(12n + 1) {
@apply row-span-2 lg:col-span-2 bg-violet;
& > *:nth-child(12n + 1),
& > *:nth-child(12n + 8) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(12n + 8) {
@apply row-span-2 lg:col-span-2 bg-cyan;
height: var(--row-height);
}
&.filled {
& > *:nth-child(12n + 1) {
@apply bg-violet;
height: var(--row-height);
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
& > *:nth-child(12n + 8) {
@apply bg-cyan;
height: var(--row-height);
}
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
}
}
.layoutD {
& > div:nth-child(12n + 2) {
@apply row-span-2 lg:col-span-2 bg-violet;
& > *:nth-child(12n + 2),
& > *:nth-child(12n + 7) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(12n + 7) {
@apply row-span-2 lg:col-span-2 bg-cyan;
height: var(--row-height);
}
&.filled {
& > *:nth-child(12n + 2) {
@apply bg-violet;
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
& > *:nth-child(12n + 7) {
@apply bg-cyan;
}
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
}
}

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

@ -8,6 +8,7 @@ interface Props {
items: [any] | any
layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
wrapper?: ReactNode | Component | any
variant?: 'default' | 'filled'
}
const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
@ -17,6 +18,7 @@ const Grid: FC<Props> = ({
className,
layout = 'A',
wrapper: Component = DefaultWrapper,
variant = 'default',
}) => {
const rootClassName = cn(
s.root,
@ -26,6 +28,8 @@ const Grid: FC<Props> = ({
[s.layoutC]: layout === 'C',
[s.layoutD]: layout === 'D',
[s.layoutNormal]: layout === 'normal',
[s.default]: variant === 'default',
[s.filled]: variant === 'filled',
},
className
)

1
components/ui/Sidebar/Sidebar.module.css
View File

@ -1,2 +1,3 @@
.root {
@apply transition-all duration-75 ease-in-out;
}

2
pages/index.tsx
View File

@ -63,7 +63,7 @@ export default function Home({
)}
/>
<div className="py-12 flex flex-row w-full">
<div className="flex-0 pr-3 w-48">
<div className="flex-0 pr-3 w-48 break-words">
ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017
</div>
<div className="flex-1">