Get rid of dangerouslySetInnerHTML in Social image styles with the excellent hover-color suggestion from Cursor editor

Author: onnimonni

components/Footer.tsx

@@ -47,20 +47,12 @@ export function FooterImpl() {
         )}
       </div>
 
-      <style
-        dangerouslySetInnerHTML={{
-          __html: socialLinks.map((action) => (
-            `.social-link-footer-${action.name} {}
-            .social-link-footer-${action.name}:hover { color: ${action.color}; }
-            `
-          )).join('\n')
-        }}
-      />
-
       <div className={styles.social}>
         {socialLinks.map((action) => (
           <a
-            className={cs(styles[action.name], `social-link-footer-${action.name}`)}
+            key={action.name}
+            style={{ '--hover-color': action.color } as React.CSSProperties}
+            className={styles[action.name]}
             href={action.href}
             title={action.title}
             target='_blank'

components/styles.module.css

@@ -85,39 +85,14 @@
 .social a:hover {
   transition: color 50ms ease-out;
 }
-
-.toggleDarkMode:hover {
-  color: #2795e9;
+.social a:hover {
+  color: var(--hover-color);
 }
 
-.twitter:hover {
+.toggleDarkMode:hover {
   color: #2795e9;
 }
 
-.mastodon:hover {
-  color: #5a4be1;
-}
-
-.zhihu:hover {
-  color: #0066ff;
-}
-
-.github:hover {
-  color: #c9510c;
-}
-
-.youtube:hover {
-  color: #ff0000;
-}
-
-.linkedin:hover {
-  color: #0077b5;
-}
-
-.newsletter:hover {
-  color: #777777;
-}
-
 .comments {
   width: 100%;
   margin-top: 2em;