Merge pull request #8 from okbel/image-component

Image Component
2025-03-14 22:42:33 +00:00 · 2020-10-24 11:28:44 -03:00 · 2020-10-24 11:28:44 -03:00 · 575eefbf94
commit 575eefbf94
parent dca8f281ab c5be2574d7
21 changed files with 531 additions and 796 deletions
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@ -1,8 +1,9 @@
+import { ChangeEvent, useEffect, useState } from 'react'
+import Image from 'next/image'
 import { Trash, Plus, Minus } from '@components/icon'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
-import { ChangeEvent, useEffect, useState } from 'react'
 import s from './CartItem.module.css'

 const CartItem = ({
@ -56,7 +57,13 @@ const CartItem = ({
  return (
    <li className="flex flex-row space-x-8 py-6">
      <div className="w-12 h-12 bg-violet relative overflow-hidden">
-        <img className={s.productImage} src={item.image_url} />
+        <Image
+          src={item.image_url}
+          width={60}
+          height={60}
+          // The cart item image is already optimized and very small in size
+          unoptimized
+        />
      </div>
      <div className="flex-1 flex flex-col justify-between text-base">
        <span className="font-bold mb-3">{item.name}</span>
--- a/components/core/Featurebar/Featurebar.module.css
+++ b/components/core/Featurebar/Featurebar.module.css
@ -0,0 +1,3 @@
+.root {
+  @apply text-center p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+}
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@ -1,6 +1,8 @@
 import cn from 'classnames'
 import { FC } from 'react'

+import s from './Featurebar.module.css'
+
 interface Props {
  className?: string
  title: string
@ -17,8 +19,10 @@ const Featurebar: FC<Props> = ({
  hide,
 }) => {
  const rootClassName = cn(
-    'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
-    { 'translate-y-full': hide },
+    s.root,
+    {
+      'transition-transform transform duration-500 ease-out translate-y-full': hide,
+    },
    className
  )
  return (
--- a/components/icon/DoubleChevron.tsx
+++ b/components/icon/DoubleChevron.tsx
@ -11,9 +11,9 @@ const DoubleChevron = ({ ...props }) => {
      <path
        d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
      />
    </svg>
  )
--- a/components/icon/Moon.tsx
+++ b/components/icon/Moon.tsx
@ -5,11 +5,11 @@ const Moon = ({ ...props }) => {
      width="24"
      height="24"
      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
      fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
      {...props}
    >
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
--- a/components/icon/RightArrow.tsx
+++ b/components/icon/RightArrow.tsx
@ -11,16 +11,16 @@ const RightArrow = ({ ...props }) => {
      <path
        d="M5 12H19"
        stroke="white"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
      />
      <path
        d="M12 5L19 12L12 19"
        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
      />
    </svg>
  )
--- a/components/icon/Sun.tsx
+++ b/components/icon/Sun.tsx
@ -5,11 +5,11 @@ const Sun = ({ ...props }) => {
      width="24"
      height="24"
      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
      fill="none"
-      shape-rendering="geometricPrecision"
+      shapeRendering="geometricPrecision"
      {...props}
    >
      <circle cx="12" cy="12" r="5" />
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@ -86,9 +86,11 @@
  }

  & .productTitle {
-    width: 18vw;
    margin-top: -7px;
    font-size: 1rem;
+    & span {
+      line-height: 3;
+    }
  }

  & .productPrice {
@ -97,13 +99,12 @@
 }

 .productTitle {
-  @apply pt-4 leading-8;
-  width: 400px;
+  @apply pt-2 max-w-full w-full;
  font-size: 2rem;
  letter-spacing: 0.4px;

  & span {
-    @apply inline p-4 bg-primary text-primary font-bold;
+    @apply py-4 px-6 bg-primary text-primary font-bold;
    font-size: inherit;
    letter-spacing: inherit;
    box-decoration-break: clone;
@ -112,10 +113,22 @@
 }

 .productPrice {
-  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
  letter-spacing: 0.4px;
 }

 .wishlistButton {
  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
 }
+
+.imageContainer {
+  @apply absolute z-10 inset-0 flex items-center justify-center;
+
+  & > div {
+    @apply h-full;
+    & > div {
+      @apply h-full;
+      padding-bottom: 0 !important;
+    }
+  }
+}
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@ -1,30 +1,46 @@
-import cn from 'classnames'
-import s from './ProductCard.module.css'
 import { FC, ReactNode, Component } from 'react'
+import cn from 'classnames'
+import Image from 'next/image'
+import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import { Heart } from '@components/icon'
-import Link from 'next/link'
+import s from './ProductCard.module.css'

 interface Props {
  className?: string
  children?: ReactNode[] | Component[] | any[]
  product: ProductNode
  variant?: 'slim' | 'simple'
+  imgWidth: number
+  imgHeight: number
+  priority?: boolean
 }

-const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
+const ProductCard: FC<Props> = ({
+  className,
+  product: p,
+  variant,
+  imgWidth,
+  imgHeight,
+  priority,
+}) => {
+  const src = p.images.edges?.[0]?.node.urlOriginal!
+
  if (variant === 'slim') {
    return (
      <div className="relative overflow-hidden box-border">
-        <img
-          className="object-scale-down h-48"
-          src={p.images.edges?.[0]?.node.urlSmall}
-        />
-        <div className="absolute inset-0 flex items-center justify-end mr-8">
+        <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
          <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
            {p.name}
          </span>
        </div>
+        <Image
+          src={src}
+          width={imgWidth}
+          height={imgHeight}
+          priority={priority}
+          quality="90"
+        />
      </div>
    )
  }
@ -34,15 +50,9 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
      <a
        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
      >
-        <div className="absolute z-10 inset-0 flex items-center justify-center">
-          <img
-            className={cn('w-full object-cover', s['product-image'])}
-            src={p.images.edges?.[0]?.node.urlXL}
-          />
-        </div>
        <div className={s.squareBg} />
-        <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          <div className="absolute top-0 left-0">
+        <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+          <div className="absolute top-0 left-0 pr-16 max-w-full">
            <h3 className={s.productTitle}>
              <span>{p.name}</span>
            </h3>
@ -52,6 +62,16 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
            <Heart />
          </div>
        </div>
+        <div className={cn(s.imageContainer)}>
+          <Image
+            className={cn('w-full object-cover', s['product-image'])}
+            src={src}
+            width={imgWidth}
+            height={imgHeight}
+            priority={priority}
+            quality="90"
+          />
+        </div>
      </a>
    </Link>
  )
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@ -28,6 +28,7 @@

 .positionIndicatorsContainer {
  @apply hidden;
+
  @screen sm {
    @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
  }
@ -35,14 +36,6 @@

 .positionIndicator {
  @apply rounded-full p-2;
-
-  /* :hover .dot {
-    @apply bg-hover-2;
-  }
-
-  :focus .dot {
-    @apply outline-none;
-  } */
 }

 .dot {
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@ -1,5 +1,4 @@
 import { useKeenSlider } from 'keen-slider/react'
-import Image from 'next/image'
 import React, { Children, FC, isValidElement, useState } from 'react'
 import cn from 'classnames'

--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@ -8,15 +8,15 @@

 .productDisplay {
  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
-  margin-right: -2rem;
-  margin-left: -2rem;
-  min-height: 400px;
+  min-height: 600px;

  @screen md {
    min-height: 700px;
  }

  @screen lg {
+    margin-right: -2rem;
+    margin-left: -2rem;
    @apply mx-0 col-span-6;
    min-height: 100%;
    height: 100%;
@ -28,7 +28,11 @@
 }

 .nameBox {
-  @apply absolute top-6 left-6 z-20;
+  @apply absolute top-6 left-0 z-20 pr-16;
+
+  @screen lg {
+    @apply left-6 pr-16;
+  }

  & .name {
    @apply px-6 py-2 bg-primary text-primary font-bold;
@ -43,16 +47,16 @@
  @screen lg {
    & .name,
    & .price {
-      @apply bg-hover-1 text-white;
+      @apply bg-violet-light text-white;
    }
  }
 }

 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;

  @screen lg {
-    @apply col-span-5 pl-12 pt-20;
+    @apply col-span-6 pt-20;
  }
 }

@ -60,6 +64,15 @@
  @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
 }

+.imageContainer {
+  & > div {
+    @apply h-full;
+    & > div {
+      @apply h-full;
+    }
+  }
+}
+
 .img {
  @apply w-full h-auto max-h-full object-cover;
 }
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@ -1,14 +1,17 @@
-import cn from 'classnames'
-import { NextSeo } from 'next-seo'
-import s from './ProductView.module.css'
 import { FC, useState } from 'react'
+import cn from 'classnames'
+import Image from 'next/image'
+import { NextSeo } from 'next-seo'
+
+import s from './ProductView.module.css'
+import { Heart } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
+
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
-import { Heart } from '@components/icon'

 interface Props {
  className?: string
@ -52,7 +55,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
          description: product.description,
          images: [
            {
-              url: product.images.edges?.[0]?.node.urlXL || '',
+              url: product.images.edges?.[0]?.node.urlOriginal!,
              width: 800,
              height: 600,
              alt: product.name,
@ -73,14 +76,17 @@ const ProductView: FC<Props> = ({ product, className }) => {

          <div className={s.sliderContainer}>
            <ProductSlider>
-              {/** TODO: Change with Image Component  **/}
              {product.images.edges?.map((image, i) => (
-                <img
-                  key={image?.node.urlSmall}
-                  className={s.img}
-                  src={image?.node.urlXL}
-                  loading={i === 0 ? 'eager' : 'lazy'}
-                />
+                <div key={image?.node.urlXL} className={s.imageContainer}>
+                  <Image
+                    className={s.img}
+                    src={image?.node.urlXL!}
+                    width={1050}
+                    height={1050}
+                    priority={i === 0}
+                    quality="90"
+                  />
+                </div>
              ))}
            </ProductSlider>
          </div>
@ -92,12 +98,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
              <div className="pb-4" key={opt.displayName}>
                <h2 className="uppercase font-medium">{opt.displayName}</h2>
                <div className="flex flex-row py-4">
-                  {opt.values.map((v: any) => {
+                  {opt.values.map((v: any, i: number) => {
                    const active = choices[opt.displayName]

                    return (
                      <Swatch
-                        key={v.entityId}
+                        key={`${v.entityId}-${i}`}
                        active={v.label === active}
                        variant={opt.displayName}
                        color={v.hexColors ? v.hexColors[0] : ''}
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@ -9,7 +9,9 @@ interface Props {
 }

 const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
-  const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
+  const rootClassName = cn(className, {
+    'mx-auto max-w-8xl px-6': !clean,
+  })

  let Component: React.ComponentType<React.HTMLAttributes<
    HTMLDivElement
--- a/components/ui/Hero/Hero.module.css
+++ b/components/ui/Hero/Hero.module.css
@ -0,0 +1,6 @@
+.root {
+  @apply mx-auto grid grid-cols-1 py-32 gap-4;
+  @screen md {
+    @apply grid-cols-2;
+  }
+}
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@ -1,6 +1,8 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
 import { RightArrow } from '@components/icon'
+import s from './Hero.module.css'
+
 interface Props {
  className?: string
  headline: string
@ -9,20 +11,24 @@ interface Props {

 const Hero: FC<Props> = ({ headline, description }) => {
  return (
-    <Container>
-      <div className="mx-auto grid grid-cols-2 bg-black py-32">
-        <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
-          {headline}
-        </h2>
-        <div className="flex flex-col justify-between">
-          <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
-          <a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
-            <span>Read it here</span>
-            <RightArrow width="20" heigh="20" className="ml-1" />
-          </a>
+    <div className="bg-black">
+      <Container>
+        <div className={s.root}>
+          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+            {headline}
+          </h2>
+          <div className="flex flex-col justify-between">
+            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
+              {description}
+            </p>
+            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+              <span>Read it here</span>
+              <RightArrow width="20" heigh="20" className="ml-1" />
+            </a>
+          </div>
        </div>
-      </div>
-    </Container>
+      </Container>
+    </div>
  )
 }

--- a/next.config.js
+++ b/next.config.js
@ -1,4 +1,8 @@
 module.exports = {
+  images: {
+    sizes: [320, 480, 820, 1200, 1600],
+    domains: ['cdn11.bigcommerce.com'],
+  },
  rewrites() {
    return [
      {
--- a/package.json
+++ b/package.json
@ -31,7 +31,7 @@
    "keen-slider": "^5.2.4",
    "lodash.debounce": "^4.0.8",
    "lodash.random": "^3.2.0",
-    "next": "^9.5.6-canary.9",
+    "next": "^9.5.6-canary.12",
    "next-seo": "^4.11.0",
    "next-themes": "^0.0.4",
    "nextjs-progressbar": "^0.0.6",
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -65,13 +65,26 @@ export default function Home({
  return (
    <div>
      <Grid>
-        {featured.slice(0, 3).map(({ node }) => (
-          <ProductCard key={node.path} product={node} />
+        {featured.slice(0, 3).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            // The first image is the largest one in the grid
+            imgWidth={i === 0 ? 1600 : 820}
+            imgHeight={i === 0 ? 1600 : 820}
+            priority
+          />
        ))}
      </Grid>
      <Marquee variant="secondary">
-        {bestSelling.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} variant="slim" />
+        {bestSelling.slice(0, 3).map(({ node }) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+          />
        ))}
      </Marquee>
      <Hero
@ -85,16 +98,28 @@ export default function Home({
        ‘Natural’."
      />
      <Grid layout="B">
-        {featured.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} />
+        {featured.slice(3, 6).map(({ node }, i) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            // The second image is the largest one in the grid
+            imgWidth={i === 1 ? 1600 : 820}
+            imgHeight={i === 1 ? 1600 : 820}
+          />
        ))}
      </Grid>
      <Marquee>
        {bestSelling.slice(3, 6).map(({ node }) => (
-          <ProductCard key={node.path} product={node} variant="slim" />
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+          />
        ))}
      </Marquee>
-      <div className="py-12 flex flex-row w-full px-12">
+      <div className="py-12 flex flex-row w-full px-6">
        <div className="pr-3 w-48 relative">
          <div className="sticky top-32">
            <ul className="mb-10">
@ -122,7 +147,13 @@ export default function Home({
        <div className="flex-1">
          <Grid layout="normal">
            {newestProducts.map(({ node }) => (
-              <ProductCard key={node.path} product={node} variant="simple" />
+              <ProductCard
+                key={node.path}
+                product={node}
+                variant="simple"
+                imgWidth={480}
+                imgHeight={480}
+              />
            ))}
          </Grid>
        </div>
--- a/pages/search.tsx
+++ b/pages/search.tsx
@ -147,6 +147,8 @@ export default function Search({
                  key={node.path}
                  className="animate__animated animate__fadeIn"
                  product={node}
+                  imgWidth={480}
+                  imgHeight={480}
                />
              ))}
            </Grid>
--- a/yarn.lock
+++ b/yarn.lock