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

components/product/ProductCard/ProductCard.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply relative w-full h-full p-6 box-border overflow-hidden;
+  @apply relative w-full p-6 box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear;
 }
 
 .productTitle {
@@ -7,7 +7,7 @@
   max-width: calc(100% - 50px);
 
   @screen lg {
-    @apply text-xl;
+    @apply text-2xl;
   }
 }
 
@@ -16,5 +16,5 @@
 }
 
 .wishlistButton {
-  @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6;
+  @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
 }

components/product/ProductCard/ProductCard.tsx

@@ -2,10 +2,11 @@ import cn from 'classnames'
 import s from './ProductCard.module.css'
 import { FC } from 'react'
 import { Heart } from '@components/icon'
+import { url } from 'inspector'
 interface Props {
   className?: string
   children?: any
-  productData: ProductData
+  node: ProductData
 }
 
 interface ProductData {
@@ -14,11 +15,18 @@ interface ProductData {
   prices: any
 }
 
-const ProductCard: FC<Props> = ({ className, productData }) => {
+const ProductCard: FC<Props> = ({ className, node: productData }) => {
   const rootClassName = cn(s.root, className)
+
   return (
-    <div className={rootClassName}>
-      {/* Overlay */}
+    <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">
@@ -30,18 +38,10 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
             </div>
           </div>
         </div>
-
         <div className={s.wishlistButton}>
           <Heart />
         </div>
       </div>
-
-      <div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12">
-        {/* <img
-          className="object-cover object-center w-full"
-          src={productData.images.edges[0].node.urlSmall}
-        /> */}
-      </div>
     </div>
   )
 }

components/product/ProductGrid/ProductGrid.module.css

@@ -1,34 +0,0 @@
-.root {
-  --row-height: calc(100vh - 80px - 56px);
-  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full;
-
-  & > * {
-    @apply row-span-1 lg:col-span-1 h-full bg-black box-border;
-    height: 500px;
-
-    @screen lg {
-      height: auto;
-    }
-  }
-
-  & > div:nth-child(6n + 1),
-  & > div:nth-child(6n + 5) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
-
-    @screen lg {
-      min-height: var(--row-height);
-    }
-  }
-
-  & > div:nth-child(6n + 5) {
-    @apply bg-blue;
-  }
-
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
-  }
-
-  & > div:nth-child(6n + 6) {
-    @apply bg-cyan;
-  }
-}

components/product/ProductGrid/ProductGrid.tsx

@@ -1,22 +0,0 @@
-import cn from 'classnames'
-import { FC } from 'react'
-import s from './ProductGrid.module.css'
-import ProductCard from '@components/product/ProductCard'
-interface Props {
-  className?: string
-  children?: any
-  products: [any] | any
-}
-
-const ProductView: FC<Props> = ({ products, className }) => {
-  const rootClassName = cn(s.root, className)
-  return (
-    <div className={rootClassName}>
-      {products.map((data: any) => (
-        <ProductCard productData={data.node} />
-      ))}
-    </div>
-  )
-}
-
-export default ProductView

components/product/ProductGrid/index.ts

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

components/product/index.ts

@@ -1,4 +1,3 @@
 export { default as Swatch } from './Swatch'
 export { default as ProductView } from './ProductView'
 export { default as ProductCard } from './ProductCard'
-export { default as ProductGrid } from './ProductGrid'

components/ui/Container/Container.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply mx-auto px-2;
+  @apply mx-auto max-w-screen-xl mx-auto px-6 sm:px-4 lg:px-10;
   display: inherit;
   max-width: 1440px;
 }

components/ui/Grid/Grid.module.css

@@ -0,0 +1,86 @@
+.root {
+  --row-height: calc(100vh - 80px - 56px);
+  @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;
+    height: 500px;
+    max-height: 800px;
+
+    @screen lg {
+      height: inherit;
+    }
+  }
+}
+
+.layoutA {
+  & > div:nth-child(6n + 1),
+  & > div:nth-child(6n + 5) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 5) {
+    @apply bg-blue;
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+
+  & > div:nth-child(6n + 6) {
+    @apply bg-cyan;
+  }
+}
+
+.layoutB {
+  & > div:nth-child(6n + 2) {
+    @apply row-span-2 lg:col-span-2 bg-blue;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 4) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+
+  & > div:nth-child(6n + 6) {
+    @apply bg-cyan;
+  }
+}
+
+.layoutC {
+  & > div:nth-child(12n + 1) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(12n + 8) {
+    @apply row-span-2 lg:col-span-2 bg-cyan;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+}
+
+.layoutD {
+  & > div:nth-child(12n + 2) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(12n + 7) {
+    @apply row-span-2 lg:col-span-2 bg-cyan;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+}

components/ui/Grid/Grid.tsx

@@ -0,0 +1,40 @@
+import cn from 'classnames'
+import { FC, ReactNode, Component } from 'react'
+import s from './Grid.module.css'
+
+interface Props {
+  className?: string
+  children?: any
+  items: [any] | any
+  layout?: 'A' | 'B' | 'C' | 'D'
+  wrapper?: ReactNode | Component | any
+}
+
+const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
+
+const Grid: FC<Props> = ({
+  items = [],
+  className,
+  layout = 'A',
+  wrapper: Component = DefaultWrapper,
+}) => {
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.layoutA]: layout === 'A',
+      [s.layoutB]: layout === 'B',
+      [s.layoutC]: layout === 'C',
+      [s.layoutD]: layout === 'D',
+    },
+    className
+  )
+  return (
+    <div className={rootClassName}>
+      {items.map((data: any) => (
+        <Component {...data} />
+      ))}
+    </div>
+  )
+}
+
+export default Grid

components/ui/Grid/index.ts

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

components/ui/Hero/Hero.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply bg-black py-12;
+}

components/ui/Hero/Hero.tsx

@@ -0,0 +1,27 @@
+import cn from 'classnames'
+import React, { FC } from 'react'
+import s from './Hero.module.css'
+import { Container } from '@components/ui'
+interface Props {
+  className?: string
+  headline: string
+  description: string
+}
+
+const Hero: FC<Props> = ({ headline, description, className }) => {
+  const rootClassName = cn(s.root, className)
+  return (
+    <div className={rootClassName}>
+      <Container>
+        <div className="max-w-xl">
+          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+            {headline}
+          </h2>
+          <p className="mt-5 text-xl leading-7 text-gray-400">{description}</p>
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+export default Hero

components/ui/Hero/index.ts

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

components/ui/Marquee/Marquee.module.css

@@ -0,0 +1,21 @@
+.root {
+  @apply w-full relative;
+  min-width: 100%;
+}
+
+.container {
+  @apply flex flex-row;
+
+  & > * {
+    @apply flex-1;
+    min-width: 500px;
+  }
+}
+
+.primary {
+  @apply bg-white;
+}
+
+.secondary {
+  @apply bg-black;
+}

components/ui/Marquee/Marquee.tsx

@@ -0,0 +1,57 @@
+import cn from 'classnames'
+import s from './Marquee.module.css'
+import { FC } from 'react'
+import Ticker from 'react-ticker'
+
+interface Props {
+  className?: string
+  children?: any
+  items: any[]
+  wrapper?: React.Component | any
+  variant?: 'primary' | 'secondary'
+}
+
+const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT PRODUCT WRAPPER
+
+const M: FC<Props> = ({
+  className = '',
+  items,
+  wrapper: Component = DefaultWrapper,
+  variant = 'primary',
+  min = 'none',
+}) => {
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.primary]: variant === 'primary',
+      [s.secondary]: variant === 'secondary',
+    },
+    className
+  )
+
+  // return (
+  //   <div className={rootClassName}>
+  //     <div className={s.container}>
+  //       {items.map((p: any) => (
+  //         <Component {...p} />
+  //       ))}
+  //     </div>
+  //   </div>
+  // )
+
+  return (
+    <Ticker>
+      {({ index }) => (
+        <div className={rootClassName}>
+          <div className={s.container}>
+            {items.map((p: any) => (
+              <Component {...p} key={index} />
+            ))}
+          </div>
+        </div>
+      )}
+    </Ticker>
+  )
+}
+
+export default M

components/ui/Marquee/index.ts

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

components/ui/index.ts

@@ -2,3 +2,6 @@ export { default as Button } from './Button'
 export { default as Container } from './Container'
 export { default as Sidebar } from './Sidebar'
 export { default as Logo } from './Logo'
+export { default as Grid } from './Grid'
+export { default as Marquee } from './Marquee'
+export { default as Hero } from './Hero'