refactor: update dependencies and improve Capitalize utility

- Updated dependencies in package.json to latest versions for better performance and security.
- Refactored Capitalize utility function into a new component for improved reusability and clarity.
- Replaced all instances of the old Capitalize function with the new component in Card and Cart components.
- Removed the old Utils.js file as it is no longer needed.

package.json

@@ -4,18 +4,17 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
-		"@reduxjs/toolkit": "^1.9.1",
+		"@reduxjs/toolkit": "^2.9.0",
-		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/react": "^13.4.0",
+		"@testing-library/react": "^16.3.0",
-		"@testing-library/user-event": "^13.5.0",
+		"@testing-library/user-event": "^14.6.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-redux": "^8.0.5",
+		"react-redux": "^9.2.0",
-		"react-router-dom": "^6.4.4",
+		"react-router-dom": "^7.9.4",
 		"react-scripts": "^5.0.1",
-		"react-toastify": "^9.1.1",
+		"react-toastify": "^11.0.5",
-		"sass": "^1.56.1",
+		"sass": "^1.93.2"
-		"web-vitals": "^2.1.4"
 	},
 	"scripts": {
 		"start": "react-scripts start",
@@ -44,6 +43,6 @@
 		]
 	},
 	"devDependencies": {
-		"gh-pages": "^4.0.0"
+		"gh-pages": "^6.3.0"
 	}
 }

src/components/Capitalize.jsx

@@ -0,0 +1,11 @@
+
+const Capitalize = ({ children, text })=> {
+  // ensure we always work with a string
+  const value = (children ?? "").toString();
+  if (!value) return null;
+
+  const capitalized = value.replace(/\b\w/g, (c) => c.toUpperCase());
+  return <>{capitalized}</>;
+}
+
+export default Capitalize

src/components/Card.jsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { addToCart, getTotals } from '../features/cartSlice';
 
-import { Capitalize } from '../features/Utils';
+import  Capitalize  from './Capitalize';
 
 const Card = ({ product }) => {
 	const dispatch = useDispatch();
@@ -18,15 +18,15 @@ const Card = ({ product }) => {
 
 	return (
 		<>
-			<h3 className='title'>{Capitalize(product.title)}</h3>
+			<h3 className='title'>{Capitalize(product?.title  ?? "")}</h3>
 			<div className='image-container'>
-				<img src={product.images[0]} alt={Capitalize(product.title)} />
+				<img src={product.images[0]} alt={Capitalize(product?.title ?? "")} />
 			</div>
 			<div className='category'>
-				<span>{Capitalize(product.category)}</span>
+				<span>{Capitalize(product?.category ?? "")}</span>
-				<span>{Capitalize(product.brand)}</span>
+				<span>{Capitalize(product?.brand ?? "")}</span>
 			</div>
-			<p className='description'>{Capitalize(product.description)}</p>
+			<p className='description'>{Capitalize(product?.description ?? "")}</p>
 			<div>
 				<p className='discount'>
 					<span>Discount: </span>

src/components/Cart.jsx

@@ -8,7 +8,7 @@ import {
 	getTotals,
 } from '../features/cartSlice';
 
-import { Capitalize } from '../features/Utils';
+import  Capitalize  from './Capitalize';
 import BackHomeButton from './BackHomeButton';
 
 const Cart = () => {

src/features/Utils.js

@@ -1,3 +0,0 @@
-export const Capitalize = (text) => {
-	return text.replace(/[_-]/g, " ").replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())
-};

src/features/cartSlice.js

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { toast } from 'react-toastify';
-import { Capitalize } from './Utils';
+import Capitalize  from '../components/Capitalize';
 import GoToCartButton from '../components/GoToCartButton';
 
 const initialState = {