fix: images not found from build

src/contexts/CatalogContext.tsx

@@ -2,6 +2,8 @@ import { createContext, ReactNode } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { CartContextProvider } from './CartContext'
 
+import { allCoffeeImages } from '../pages/Home/Catalog/assets/coffees'
+
 export interface Product {
   id: string
   image: string
@@ -22,47 +24,47 @@ interface CatalogContextProviderProps {
 const coffeeList = [
   {
     id: uuidv4(),
-    image: 'expresso-tradicional.svg',
+    image: allCoffeeImages.expressoTradicional,
     tags: ['tradicional'],
     name: 'Expresso Tradicional',
     description: 'O tradicional café feito com água quente e grãos moídos',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'expresso-americano.svg',
+    image: allCoffeeImages.expressoAmericano,
     tags: ['tradicional'],
     name: 'Expresso Americano',
     description: 'Expresso diluído, menos intenso que o tradicional',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'expresso-cremoso.svg',
+    image: allCoffeeImages.expressoCremoso,
     tags: ['tradicional'],
     name: 'Expresso Cremoso',
     description: 'Café expresso tradicional com espuma cremosa',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'expresso-gelado.svg',
+    image: allCoffeeImages.expressoGelado,
     tags: ['tradicional', 'gelado'],
     name: 'Expresso Gelado',
     description: 'Bebida preparada com café expresso e cubos de gelo',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'cafe-com-leite.svg',
+    image: allCoffeeImages.cafeComLeite,
     tags: ['tradicional', 'com leite'],
     name: 'Café com Leite',
     description: 'Meio a meio de expresso tradicional com leite vaporizado',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'latte.svg',
+    image: allCoffeeImages.latte,
     tags: ['tradicional', 'com leite'],
     name: 'Latte',
     description:
@@ -71,7 +73,7 @@ const coffeeList = [
   },
   {
     id: uuidv4(),
-    image: 'capuccino.svg',
+    image: allCoffeeImages.capuccino,
     tags: ['tradicional', 'com leite'],
     name: 'Capuccino',
     description:
@@ -80,7 +82,7 @@ const coffeeList = [
   },
   {
     id: uuidv4(),
-    image: 'macchiato.svg',
+    image: allCoffeeImages.macchiato,
     tags: ['tradicional', 'com leite'],
     name: 'Macchiato',
     description:
@@ -89,23 +91,23 @@ const coffeeList = [
   },
   {
     id: uuidv4(),
-    image: 'mocaccino.svg',
+    image: allCoffeeImages.mocaccino,
     tags: ['tradicional', 'com leite'],
     name: 'Mocaccino',
     description: 'Café expresso com calda de chocolate, pouco leite e espuma',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'chocolate-quente.svg',
+    image: allCoffeeImages.chocolateQuente,
     tags: ['especial', 'com leite'],
     name: 'Chocolate Quente',
     description: 'Bebida feita com chocolate dissolvido no leite quente e café',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'cubano.svg',
+    image: allCoffeeImages.cubano,
     tags: ['especial', 'alcoólico', 'gelado'],
     name: 'Chocolate Quente',
     description:
@@ -114,23 +116,23 @@ const coffeeList = [
   },
   {
     id: uuidv4(),
-    image: 'havaiano.svg',
+    image: allCoffeeImages.havaiano,
     tags: ['especial'],
     name: 'Havaiano',
     description: 'Bebida adocicada preparada com café e leite de coco',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'arabe.svg',
+    image: allCoffeeImages.arabe,
     tags: ['especial'],
     name: 'Árabe',
     description: 'Bebida preparada com grãos de café árabe e especiarias',
     price: 9.9,
   },
   {
     id: uuidv4(),
-    image: 'irlandes.svg',
+    image: allCoffeeImages.irlandes,
     tags: ['especial', 'alcoólico'],
     name: 'Irlandês',
     description: 'Bebida a base de café, uísque irlandês, açúcar e chantilly',

src/pages/Checkout/components/Cart/components/CartItem/index.tsx

@@ -31,10 +31,7 @@ export function CartItem(props: CardItemProps) {
 
   return (
     <CartItemContainer>
-      <img
-        src={`src/pages/Home/Catalog/assets/coffees/${image}`}
-        alt={`Xícara com ${image}`}
-      />
+      <img src={image} alt={`Xícara com ${image}`} />
       <ActionsContainer>
         <div className="name">{name}</div>
         <CounterContainer>

src/pages/Home/Catalog/ItemCard/index.tsx

@@ -3,7 +3,6 @@ import { Minus, Plus, ShoppingCart } from 'phosphor-react'
 import { useContext, useState } from 'react'
 import { CartContext } from '../../../../contexts/CartContext'
 import { formatPrice } from '../../../../util/format'
-
 interface ItemCardProps {
   id: string
   image: string
@@ -45,10 +44,7 @@ export function ItemCard({
 
   return (
     <ItemContainer>
-      <img
-        src={`src/pages/Home/Catalog/assets/coffees/${image}`}
-        alt={`Xícara com ${name}`}
-      />
+      <img src={image} alt={`Xícara com ${name}`} />
       <ul className="tags">
         {tags.map((tag) => (
           <li key={tag}>{tag}</li>

src/pages/Home/Catalog/assets/coffees/index.ts

@@ -0,0 +1,31 @@
+import arabe from './arabe.svg'
+import cafeComLeite from './cafe-com-leite.svg'
+import capuccino from './capuccino.svg'
+import chocolateQuente from './chocolate-quente.svg'
+import cubano from './cubano.svg'
+import expressoAmericano from './expresso-americano.svg'
+import expressoCremoso from './expresso-cremoso.svg'
+import expressoGelado from './expresso-gelado.svg'
+import expressoTradicional from './expresso-tradicional.svg'
+import havaiano from './havaiano.svg'
+import irlandes from './irlandes.svg'
+import latte from './latte.svg'
+import macchiato from './macchiato.svg'
+import mocaccino from './mocaccino.svg'
+
+export const allCoffeeImages = {
+  arabe,
+  cafeComLeite,
+  capuccino,
+  chocolateQuente,
+  cubano,
+  expressoAmericano,
+  expressoCremoso,
+  expressoGelado,
+  expressoTradicional,
+  havaiano,
+  irlandes,
+  latte,
+  macchiato,
+  mocaccino,
+}