Get clients data from utils

Author: realstoman

src/components/AboutClientSingle.js

@@ -1,13 +1,11 @@
-const AboutClientSingle = ({ clients }) => {
+const AboutClientSingle = ({ title, image }) => {
 	return (
 		<>
-			{clients.map((client) => (
-				<img
-					src={client.img}
-					className="w-64 py-5 px-10 border bg-secondary-light border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
-					alt={client.title}
-				/>
-			))}
+			<img
+				src={image}
+				className="w-64 py-5 px-10 border bg-secondary-light border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
+				alt={title}
+			/>
 		</>
 	);
 };

src/components/AboutClients.js

@@ -1,65 +1,20 @@
-import AmazonImage from '../images/brands/amazon_gray.png';
-import SonyImage from '../images/brands/sony_gray.png';
-import AdidasImage from '../images/brands/adidas_gray.png';
-import FilaImage from '../images/brands/fila_gray.png';
-import NBImage from '../images/brands/nb_gray.png';
-import SamsungImage from '../images/brands/samsung_gray.png';
-import CanonImage from '../images/brands/canon_gray.png';
-import PumaImage from '../images/brands/puma_gray.png';
 import AboutClientSingle from './AboutClientSingle';
-
-const clientsHeading = 'Some of the brands I worked with';
-const clientsData = [
-	{
-		id: 1,
-		title: 'Amazon',
-		img: AmazonImage,
-	},
-	{
-		id: 2,
-		title: 'Sony',
-		img: SonyImage,
-	},
-	{
-		id: 3,
-		title: 'Adidas',
-		img: AdidasImage,
-	},
-	{
-		id: 4,
-		title: 'FILA',
-		img: FilaImage,
-	},
-	{
-		id: 5,
-		title: 'NB',
-		img: NBImage,
-	},
-	{
-		id: 6,
-		title: 'SAMSUNG',
-		img: SamsungImage,
-	},
-	{
-		id: 7,
-		title: 'CANON',
-		img: CanonImage,
-	},
-	{
-		id: 7,
-		title: 'PUMA',
-		img: PumaImage,
-	},
-];
+import { ClientsData, ClientsHeading } from '../utils/ClientsData';
 
 const AboutClients = () => {
 	return (
 		<div className="mt-10 sm:mt-20">
 			<p className="text-2xl sm:text-4xl text-primary-dark dark:text-primary-light font-sans font-semibold">
-				{clientsHeading}
+				{ClientsHeading}
 			</p>
 			<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-20 gap-2">
-				<AboutClientSingle clients={clientsData} />
+				{ClientsData.map((client) => (
+					<AboutClientSingle
+						title={client.title}
+						image={client.img}
+						key={client.id}
+					/>
+				))}
 			</div>
 		</div>
 	);

src/components/HireMeModal.js

@@ -91,7 +91,6 @@ const HireMeModal = ({ onClose, onRequest }) => {
 											rounded-md
 											sm:rounded-lg
 											focus:ring-1 focus:ring-indigo-900"
-										type="button"
 										aria-label="Submit Request"
 									>
 										Send Request

src/utils/ClientsData.js

@@ -0,0 +1,52 @@
+import AmazonImage from '../images/brands/amazon_gray.png';
+import SonyImage from '../images/brands/sony_gray.png';
+import AdidasImage from '../images/brands/adidas_gray.png';
+import FilaImage from '../images/brands/fila_gray.png';
+import NBImage from '../images/brands/nb_gray.png';
+import SamsungImage from '../images/brands/samsung_gray.png';
+import CanonImage from '../images/brands/canon_gray.png';
+import PumaImage from '../images/brands/puma_gray.png';
+
+export const ClientsHeading = 'Some of the brands I worked with';
+export const ClientsData = [
+	{
+		id: 1,
+		title: 'Amazon',
+		img: AmazonImage,
+	},
+	{
+		id: 2,
+		title: 'Sony',
+		img: SonyImage,
+	},
+	{
+		id: 3,
+		title: 'Adidas',
+		img: AdidasImage,
+	},
+	{
+		id: 4,
+		title: 'FILA',
+		img: FilaImage,
+	},
+	{
+		id: 5,
+		title: 'NB',
+		img: NBImage,
+	},
+	{
+		id: 6,
+		title: 'SAMSUNG',
+		img: SamsungImage,
+	},
+	{
+		id: 7,
+		title: 'CANON',
+		img: CanonImage,
+	},
+	{
+		id: 7,
+		title: 'PUMA',
+		img: PumaImage,
+	},
+];