feat(pages): ♻️ changes ICoffeeSchema and coffee listing and details …

…translation logic

src/components/CoffeeCard/index.tsx

@@ -7,29 +7,25 @@ import { convertToDollars } from "../../utils/convertToDollar";
 import { AddedToCartNotification } from "../AddedToCartNotification";
 import { IconButton } from "../IconButton";
 
-export interface CoffeeCardProps {
+export interface ICoffeeCardProps {
   id: string;
   imgSrc: string;
-  coffeeName: string;
-  coffeeDesc: string;
   coffeePrice: number;
   coffeeTags: string[];
 }
 
 export function CoffeeCard({
   id,
   imgSrc,
-  coffeeName,
-  coffeeDesc,
-  coffeePrice,
   coffeeTags,
-}: CoffeeCardProps) {
+  coffeePrice,
+}: ICoffeeCardProps) {
   const { t, i18n } = useTranslation();
   const { handleAddToCart } = useContext(AppContext);
 
   const [productQuantity, setProductQuantity] = useState<number>(1);
 
-  const [formatedCoffeePrice, setformatedCoffeePrice] = useState<
+  const [formattedCoffeePrice, setFormattedCoffeePrice] = useState<
     string | null
   >(null);
 
@@ -50,7 +46,12 @@ export function CoffeeCard({
 
   function handleAddedToCartWithNotification() {
     handleAddToCart(
-      { id, imgSrc, coffeeName, coffeeTags, coffeeDesc, coffeePrice },
+      {
+        id,
+        imgSrc,
+        coffeeTags,
+        coffeePrice,
+      },
       productQuantity,
     );
     if (showAddedToCartNotification === false) {
@@ -65,15 +66,15 @@ export function CoffeeCard({
     if (i18n.language === "en") {
       convertToDollars(coffeePrice)
         .then((coffeePriceInDollar) =>
-          setformatedCoffeePrice(coffeePriceInDollar),
+          setFormattedCoffeePrice(coffeePriceInDollar),
         )
         .catch(() => {
           console.error("Error while trying to convert coffee price");
         });
     } else {
-      setformatedCoffeePrice(`${coffeePrice}`.replace(".", ","));
+      setFormattedCoffeePrice(`${coffeePrice}`.replace(".", ","));
     }
-  }, [formatedCoffeePrice, coffeePrice, i18n.language]);
+  }, [formattedCoffeePrice, coffeePrice, i18n.language]);
 
   return (
     <>
@@ -89,24 +90,24 @@ export function CoffeeCard({
                 key={index}
                 className="mt-3 w-fit items-center justify-center rounded-full bg-product-yellow-light px-2 py-1 text-[0.625rem] font-bold uppercase text-product-yellow-dark"
               >
-                <span>{coffeeTag}</span>
+                <span>{t(`${coffeeTag}Tag`)}</span>
               </div>
             ))}
           </div>
         </div>
         <div className="text-center">
           <h3 className="font-sans-b text-2xl font-bold text-base-subtitle">
-            {coffeeName}
+            {t(`${id}Name`)}
           </h3>
-          <p className="mb-8 mt-2 text-base-label">{coffeeDesc}</p>
+          <p className="mb-8 mt-2 text-base-label">{t(`${id}Desc`)}</p>
           <div className="flex flex-wrap items-center justify-evenly gap-6">
             <span className="font-sans-b text-2xl font-bold text-base-text">
               <span className="font-sans-r text-sm font-normal">
                 {t("currencySymbol")}&nbsp;
               </span>
               {i18n.language === "pt"
                 ? `${coffeePrice}`.replace(".", ",")
-                : formatedCoffeePrice}
+                : formattedCoffeePrice}
             </span>
             <div className="flex items-center justify-center gap-2">
               <div className="flex items-center justify-evenly gap-1 rounded-md bg-base-button p-2 text-base">

src/data/coffees.ts

@@ -0,0 +1,102 @@
+import arabe from "../assets/arabe.png";
+import cafeComLeite from "../assets/cafe-com-leite.png";
+import capuccino from "../assets/capuccino.png";
+import hotChocolate from "../assets/chocolate-quente.png";
+import cubano from "../assets/cubano.png";
+import expresso from "../assets/expresso.png";
+import expressoAmericano from "../assets/expresso-americano.png";
+import expressoCremoso from "../assets/expresso-cremoso.png";
+import expressoGelado from "../assets/expresso-gelado.png";
+import havaiano from "../assets/havaiano.png";
+import irlandes from "../assets/irlandes.png";
+import latte from "../assets/latte.png";
+import macchiato from "../assets/macchiato.png";
+import mochaccino from "../assets/mochaccino.png";
+import { ICoffeeSchema } from "../types/coffeType";
+
+export const coffeeList: ICoffeeSchema[] = [
+  {
+    id: "traditionalExpresso",
+    imgSrc: expresso,
+    coffeeTags: ["traditional"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "americanExpresso",
+    imgSrc: expressoAmericano,
+    coffeeTags: ["traditional"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "creamyExpresso",
+    imgSrc: expressoCremoso,
+    coffeeTags: ["traditional"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "coldExpresso",
+    imgSrc: expressoGelado,
+    coffeeTags: ["traditional", "iced"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "coffeeAndMilk",
+    imgSrc: cafeComLeite,
+    coffeeTags: ["traditional", "withMilk"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "latte",
+    imgSrc: latte,
+    coffeeTags: ["traditional", "withMilk"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "capuccino",
+    imgSrc: capuccino,
+    coffeeTags: ["traditional", "withMilk"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "macchiato",
+    imgSrc: macchiato,
+    coffeeTags: ["traditional", "withMilk"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "mochaccino",
+    imgSrc: mochaccino,
+    coffeeTags: ["traditional", "withMilk"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "hotChocolate",
+    imgSrc: hotChocolate,
+    coffeeTags: ["traditional", "withMilk"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "cuban",
+    imgSrc: cubano,
+    coffeeTags: ["special", "alcoholic", "iced"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "hawaiian",
+    imgSrc: havaiano,
+    coffeeTags: ["special"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "arab",
+    imgSrc: arabe,
+    coffeeTags: ["special"],
+    coffeePrice: 9.99,
+  },
+  {
+    id: "irish",
+    imgSrc: irlandes,
+    coffeeTags: ["special", "alcoholic"],
+    coffeePrice: 9.99,
+  },
+];

src/pages/Home/index.tsx

@@ -2,9 +2,9 @@ import { Coffee, Package, ShoppingCart, Timer } from "@phosphor-icons/react";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 
-import specialCoffeDisplayHomepage from "../../assets/special-coffe-display-homepage.png";
+import specialCoffeeDisplayHomepage from "../../assets/special-coffee-display-homepage.png";
 import { CoffeeCard } from "../../components/CoffeeCard";
-import { coffeeList } from "../../data/coffes";
+import { coffeeList } from "../../data/coffees";
 
 export function Home() {
   const { t } = useTranslation();
@@ -75,7 +75,7 @@ export function Home() {
           </div>
           <div className="flex items-center justify-center">
             <div className="max-w-lg">
-              <img src={specialCoffeDisplayHomepage} alt="" />
+              <img src={specialCoffeeDisplayHomepage} alt="" />
             </div>
           </div>
         </div>
@@ -84,15 +84,13 @@ export function Home() {
             {t("coffeeListHeadline")}
           </h2>
           <ul className="mt-12 grid grid-cols-1 items-center justify-center gap-x-8 gap-y-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {coffeeList.map((coffe) => (
-              <li className="flex items-center justify-center" key={coffe.id}>
+            {coffeeList.map((coffee) => (
+              <li className="flex items-center justify-center" key={coffee.id}>
                 <CoffeeCard
-                  id={coffe.id}
-                  imgSrc={coffe.imgSrc}
-                  coffeeName={coffe.coffeeName}
-                  coffeeDesc={coffe.coffeeDesc}
-                  coffeeTags={coffe.coffeeTags}
-                  coffeePrice={coffe.coffeePrice}
+                  id={coffee.id}
+                  imgSrc={coffee.imgSrc}
+                  coffeeTags={coffee.coffeeTags}
+                  coffeePrice={coffee.coffeePrice}
                 />
               </li>
             ))}

src/types/coffeType.ts

@@ -1,8 +1,6 @@
-export interface coffeType {
+export interface ICoffeeSchema {
   id: string;
   imgSrc: string;
-  coffeeName: string;
-  coffeeDesc: string;
   coffeeTags: string[];
   coffeePrice: number;
 }