fix url logo , images and product name

src/Components/HOC/CartWithDrawer.tsx

@@ -103,8 +103,8 @@ const CartWithDrawer = () => {
             </div>
           ) : (
             <div className="EmptyCard">
-              {/* <img src="/Cart/empty_card.gif" alt="" />
+              <img src="/Cart/empty_card.gif" alt="" />
-              <p>{t('You have not placed any orders yet')}</p> */}
+              <p>{t('You have not placed any orders yet')}</p>
             </div>
           )}
         </div>

src/Components/Home/ProductCard.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
-import { FaHeart, FaStar } from "react-icons/fa";
+import { FaHeart, FaStar, FaCartPlus } from "react-icons/fa";
 import { Currency } from "../../Layout/app/Const";
-import { FaCartPlus } from "react-icons/fa6";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import CustomImage from "../../ui/CustomImage";
@@ -18,8 +17,7 @@ const ProductCard = ({ item }: { item: Product }) => {
   const navigate = useNavigate();
   const { isAuthenticated } = useAuthState();
 
-  const handel_click = (id: number) => {
+  const handle_click = (id: number) => {
-    
     navigate(`/product/${id}`);
   };
 
@@ -34,82 +32,69 @@ const ProductCard = ({ item }: { item: Product }) => {
   const randomRate = (Math.random() * (max - min) + min)?.toFixed(1);
 
   const { Cart, setCart } = useCartState();
-
   const queryClient = useQueryClient();
 
-  const handelChangeFavorite = (item: Product) => {
+  const handleChangeFavorite = (item: Product) => {
-    // if (!isAuthenticated) {
+    if (!isAuthenticated) {
-    //   toast.error("sorry you need to be authenticated");
+      toast.error("Sorry, you need to be authenticated");
-    //   return;
+      return;
-    // }
+    }
 
     if (item?.favorite) {
-      
+      deleteToFavorite({ id: item?.id });
-      deleteToFavorite({
-        id: item?.id,
-      });
     } else {
-      addToFavorite({
+      addToFavorite({ id: item?.id });
-        id: item?.id,
-      });
     }
-    queryClient.invalidateQueries('mainProduct');
+    queryClient.invalidateQueries("mainProduct");
-
   };
 
   useEffect(() => {
     if (Add) {
-      toast.success("added  success");
+      toast.success("Added successfully");
       queryClient.invalidateQueries("mainProduct");
     }
   }, [Add]);
+
   useEffect(() => {
     if (Delete) {
-      toast.success("removed success");
+      toast.success("Removed successfully");
       queryClient.invalidateQueries("mainProduct");
     }
   }, [Delete]);
 
-  const handelAddToCart = (item: Product) => {
+  const handleAddToCart = (item: Product) => {
-    // if (!isAuthenticated) {
+    if (!isAuthenticated) {
-
+      toast.error("Sorry, you need to be authenticated");
-    //   toast.error("sorry you need to be authenticated");
+      return;
-    //   return;
+    }
-    // }
     setCart(item);
-
+    toast.success(`${languageObject(item?.name)} added to cart`);
-
-    toast.success(`${languageObject(item?.name)}` + " added to cart");
   };
-
+  const Desc :any  = item?.description
-    
+  const words = Desc.split(' ');
+  const firstThreeWord = words.slice(0, 2).join(' ');
+  const result = words.length > 2 ? firstThreeWord + '...' : firstThreeWord;
   return (
     <div className="ProductCard">
-      <CustomImage src={item?.main_photo} onClick={() => handel_click(item?.base_product_id)} />
+      <CustomImage src={item?.main_photo} onClick={() => handle_click(item?.base_product_id)} />
-      <h4>{languageObject(item?.name)}</h4>
+      <h4 className="truncate-text">{languageObject(item?.name)}</h4>
-      <p>
+      <h4 className="desc">Description: {result}</h4>
-        {" "}
+
-        {Currency} {oldPrice}{" "}
+      {/* <p>{Currency} {oldPrice}</p>
-      </p>
       <div>
+        <p>{price}</p>
         <p>
-          {" "}
-          {Currency} {price}
-        </p>
-        <p>
-          {" "}
           {randomRate} <FaStar />
         </p>
-      </div>
+      </div> */}
       <span>{discountAmount}%</span>
-
       <article>
-        <button className="button" onClick={() => handelAddToCart(item)}>
+        <button className="button" onClick={() => handleAddToCart(item)}>
           <FaCartPlus />
           {t("add to cart")}
         </button>
         <FaHeart
-          onClick={() => handelChangeFavorite(item)}
+          onClick={() => handleChangeFavorite(item)}
           className={item?.favorite ? "" : "not_favorite"}
         />
       </article>
@@ -118,3 +103,4 @@ const ProductCard = ({ item }: { item: Product }) => {
 };
 
 export default ProductCard;
+

src/Styles/Page/Cart.scss

@@ -70,7 +70,7 @@
 }
 
 .Drawer_Body{
-    height: 70vh;
+    // height: 70vh;
     display: flex; flex-direction: column; justify-content: space-between;align-items: center;
 }
 .ar{
@@ -110,8 +110,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin-top: 5%;
+    margin-top: 10% !important; 
-    gap: 20px;
+    // gap: 20px;
     img{
         width: 40%;
     }

src/Styles/Page/Product.scss

@@ -110,7 +110,7 @@
       .product_multi_image{
         width: 60px !important;
         height: 50px;
-        object-fit: fill;
+        object-fit: contain;
         cursor: pointer;
       }
     }
@@ -264,3 +264,15 @@
   margin-left: 10px;
   border: 2px solid var(--primary); /* or any color that fits your design */
 }
+.truncate-text {
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%; /* Adjust as needed */
+  font-size: 14px !important;
+}
+.desc{
+  font-size: 14px !important;
+  min-height: 60px;
+}

src/Styles/components/ProductCard.scss

@@ -41,6 +41,8 @@
     margin-bottom: 20px;
     cursor: pointer;
     margin-top: 30px;
+    aspect-ratio: 1;
+    object-fit: cover;
   }
 
   div {

src/types/item.ts

@@ -1,4 +1,5 @@
 export interface Translation {
+  split(arg0: string): unknown;
   en: string;
   ar: string;
   de: string;