Update: X Logo Added to Sidebar/Socials

Author: danielcranney

--yarn.lock

@@ -1,14 +1,14 @@
 import React from "react";
 import Link from "next/link";
 import GitHubIcon from "./GitHubIcon";
-import TwitterIcon from "./TwitterIcon";
+import XIcon from "./XIcon";
 
 const SidebarFooter = () => {
   return (
     <div className={`z-40 flex flex-col px-6 gap-y-2`}>
       <article className="flex gap-x-2 items-center">
         <GitHubIcon />
-        <TwitterIcon />
+        <XIcon />
       </article>
 
       <p className="text-xs text-white dark:text-white mb-0">

components/misc/SidebarFooter.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const XIcon = () => {
+  return (
+    <a
+      href="http://www.twitter.com/danielcranney"
+      target="_blank"
+      rel="noreferrer"
+      className="no-underline"
+    >
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        className="w-5 h-5 group mt-auto fill-white opacity-70 group-hover:opacity-100 transition-all duration-150 ease-in-out"
+      >
+        <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+      </svg>
+    </a>
+  );
+};
+
+export default XIcon;

components/misc/TwitterIcon.js

@@ -338,7 +338,7 @@ const Badges = React.forwardRef((props, ref) => {
                     });
                   }}
                 >
-                  add your Twitter profile
+                  add your X profile
                 </a>{" "}
                 in the socials section.
               </p>

components/misc/XIcon.js

@@ -61,7 +61,7 @@ const Socials = React.forwardRef((props, ref) => {
             section={"socials"}
             account={"twitter"}
             inputPlaceholder={"yourname"}
-            formLabelText={"Twitter profile:"}
+            formLabelText={"X profile:"}
             linkPrefix={state.socials.twitter.linkPrefix}
             action={ACTIONS.ADD_SOCIAL_PROFILE}
           />

components/sections/Badges.js

@@ -1,5 +1,5 @@
-import {STORED_STATE_KEY} from "../pages/_app";
+import { STORED_STATE_KEY } from "../pages/_app";
 
 export default (action, state) => {
-    localStorage.setItem(STORED_STATE_KEY, JSON.stringify(state));
-};
+  localStorage.setItem(STORED_STATE_KEY, JSON.stringify(state));
+};

components/sections/Socials.js

@@ -924,7 +924,7 @@ const initialState = {
     },
     twitter: {
       path: "https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/twitter.svg",
-      linkPrefix: "https://www.twitter.com/",
+      linkPrefix: "https://www.x.com/",
       linkSuffix: "",
     },
     hashnode: {

middleware/storeStateMiddleware.js

@@ -500,7 +500,7 @@ Web Developer
                     src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/twitter.svg"
                     width="100%"
                     className="scale-100 transition-all duration-300 hover:scale-125 ease-in-out"
-                    alt="Twitter"
+                    alt="X"
                   />
                 </div>