Updated the Twitter logo to X

package.json

@@ -23,7 +23,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
-    "react-icons": "^4.11.0",
+    "react-icons": "^5.1.0",
     "react-string-replace": "^1.1.1",
     "react-toastify": "^10.0.4",
     "sharp": "^0.32.6"

src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
-import {BiLogoFacebook} from "react-icons/bi";
+import { BiLogoFacebook } from "react-icons/bi";
-import {BsInstagram, BsTwitter} from "react-icons/bs";
+import { BsInstagram, BsTwitterX } from "react-icons/bs";
 import translation from "@/translation/footer.json";
 import clsx from "clsx";
 import FooterSection from "@/types/cms/footer";
@@ -16,11 +16,13 @@ interface FooterLinkProps {
   href: string;
 }
 
-const FooterLink = ({language, href, children}: FooterLinkProps) => {
+const FooterLink = ({ language, href, children }: FooterLinkProps) => {
-	return <Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>;
+  return (
+    <Link href={`${language === "ar" ? "/ar" : ""}${href}`}>{children}</Link>
+  );
 };
 
-export default function Footer({language, data}: Props) {
+export default function Footer({ language, data }: Props) {
   return (
     <>
       <section className="bg-mti-gray-seasalt w-full">
@@ -28,7 +30,8 @@ export default function Footer({language, data}: Props) {
           className={clsx(
             "w-full py-10 px-8 md:px-28 flex flex-col md:justify-between gap-8 lg:container lg:mx-auto",
             language === "ar" ? "md:flex-row-reverse" : "md:flex-row",
-					)}>
+          )}
+        >
           <div className="flex flex-col gap-4">
             <span className="font-bold text-xl">{data.Navigation.Text}</span>
             <div className="flex flex-col gap-2">
@@ -78,20 +81,28 @@ export default function Footer({language, data}: Props) {
             <span className="font-bold text-xl">{data.GetInTouch.Title}</span>
             <div className="flex flex-col gap-4">
               <span className="max-w-[280px]">{data.GetInTouch.Text}</span>
-							<div className={clsx("flex gap-6 items-center", language === "ar" && "flex-row-reverse justify-start")}>
+              <div
+                className={clsx(
+                  "flex gap-6 items-center",
+                  language === "ar" && "flex-row-reverse justify-start",
+                )}
+              >
                 <Link
                   href="https://facebook.com"
-									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+                  className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300"
+                >
                   <BiLogoFacebook className="w-6 h-6" />
                 </Link>
                 <Link
                   href="https://twitter.com"
-									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+                  className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300"
-									<BsTwitter className="w-5 h-5" />
+                >
+                  <BsTwitterX className="w-5 h-5" />
                 </Link>
                 <Link
                   href="https://instagram.com"
-									className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+                  className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300"
+                >
                   <BsInstagram className="w-5 h-5" />
                 </Link>
               </div>
@@ -100,7 +111,9 @@ export default function Footer({language, data}: Props) {
         </div>
       </section>
 
-			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© {data.Copyright}</footer>
+      <footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">
+        © {data.Copyright}
+      </footer>
     </>
   );
 }

yarn.lock

@@ -2263,10 +2263,10 @@ react-hook-form@^7.50.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.1.tgz#f6aeb17a863327e5a0252de8b35b4fc8990377ed"
   integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==
 
-react-icons@^4.11.0:
+react-icons@^5.1.0:
-  version "4.11.0"
+  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.1.0.tgz#9e7533cc256571a610c2a1ec8a7a143fb1222943"
-  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
+  integrity sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==
 
 react-is@^16.13.1:
   version "16.13.1"