Add image component to cart items

components/cart/CartItem/CartItem.tsx

@@ -1,8 +1,10 @@
+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 getPathname from '@lib/get-pathname'
 import s from './CartItem.module.css'
 
 const CartItem = ({
@@ -56,7 +58,7 @@ 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={getPathname(item.image_url)} width={60} height={60} />
       </div>
       <div className="flex-1 flex flex-col justify-between text-base">
         <span className="font-bold mb-3">{item.name}</span>

components/product/ProductCard/ProductCard.tsx

@@ -2,9 +2,10 @@ import { FC, ReactNode, Component } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
-import s from './ProductCard.module.css'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
+import getPathname from '@lib/get-pathname'
 import { Heart } from '@components/icon'
+import s from './ProductCard.module.css'
 
 interface Props {
   className?: string
@@ -16,11 +17,6 @@ interface Props {
   priority?: boolean
 }
 
-function getImagePath(imageUrl: string) {
-  const url = new URL(imageUrl)
-  return url.pathname
-}
-
 const ProductCard: FC<Props> = ({
   className,
   product: p,
@@ -29,7 +25,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = getImagePath(p.images.edges?.[0]?.node.urlOriginal!)
+  const src = getPathname(p.images.edges?.[0]?.node.urlOriginal!)
 
   if (variant === 'slim') {
     return (

lib/get-pathname.ts

@@ -0,0 +1,3 @@
+export default function getPathname(url: string) {
+  return new URL(url).pathname
+}