Social Highlight Cards

1import "./social-highlight-cards.css";2
3import type { CSSProperties } from "react";4
5const socials = [6  { label: "Henrique Barone on LinkedIn", href: "https://www.linkedin.com/in/hbarone/", highlight: "#0a66c2", icon: "linkedin" },7  { label: "Henrique Barone on GitHub", href: "https://github.com/henriquegpb", highlight: "light-dark(#14181e,#f0f0f0)", icon: "github" },8  { label: "Henrique Barone on Instagram", href: "https://www.instagram.com/henrique_barone/", highlight: "#e4405f", icon: "instagram" },9];10
11function SocialIcon({ name = "linkedin" }) {12  if (name === "linkedin") {13    return <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5.1 3.5a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2ZM3.3 8.9h3.6V20H3.3V8.9Zm5.8 0h3.4v1.5h.1c.5-.9 1.6-1.9 3.5-1.9 3.7 0 4.4 2.4 4.4 5.6V20h-3.6v-5.1c0-1.2 0-2.8-1.7-2.8s-2 1.3-2 2.7V20H9.1V8.9Z" /></svg>;14  }15
16  if (name === "github") {17    return <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2C6.48 2 2 6.58 2 12.23c0 4.52 2.87 8.35 6.84 9.7.5.1.68-.22.68-.5v-1.9c-2.78.62-3.36-1.2-3.36-1.2-.46-1.19-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .08 1.53 1.06 1.53 1.06.9 1.57 2.35 1.12 2.92.86.09-.67.35-1.12.64-1.38-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.31.1-2.74 0 0 .84-.28 2.75 1.05A9.36 9.36 0 0 1 12 6.84c.85 0 1.7.12 2.5.34 1.91-1.33 2.75-1.05 2.75-1.05.55 1.43.2 2.48.1 2.74.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.06.36.32.68.94.68 1.89v2.8c0 .28.18.6.69.5A10.25 10.25 0 0 0 22 12.23C22 6.58 17.52 2 12 2Z" /></svg>;18  }19
20  return <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="2" /><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="2" /><circle cx="17.4" cy="6.6" r="1.2" fill="currentColor" /></svg>;21}22
23export function SocialHighlightCards() {24  return (25    <nav className="social-highlight-cards" aria-label="Social links">26      {socials.map((social) => (27        <a28          className="social-highlight-card"29          href={social.href}30          key={social.href}31          target="_blank"32          rel="noreferrer"33          title={social.label}34          aria-label={social.label}35          style={{ color: social.highlight, "--social-highlight": social.highlight } as CSSProperties}36        >37          <span className="social-highlight-card__glow" aria-hidden="true" />38          <span className="social-highlight-card__beam" aria-hidden="true" />39          <span className="social-highlight-card__icon"><SocialIcon name={social.icon} /></span>40        </a>41      ))}42    </nav>43  );44}

1.social-highlight-cards {2  display: flex;3  align-items: center;4  justify-content: center;5  gap: 14px;6}7.social-highlight-card {8  position: relative;9  isolation: isolate;10  display: grid;11  width: 64px;12  height: 64px;13  place-items: center;14  overflow: hidden;15  border: 1px solid light-dark(rgba(20, 24, 30, .09), rgba(255, 255, 255, .09));16  border-radius: 6px;17  background: light-dark(#ffffff,#16171d);18  box-shadow:19    inset 0 1px 0 light-dark(rgba(20, 24, 30, .035), rgba(255, 255, 255, .035)),20    0 1px 0 light-dark(rgba(20, 24, 30, .08), rgba(255, 255, 255, .08));21  text-decoration: none;22  transition:23    border-color 480ms cubic-bezier(.22, 1, .36, 1),24    background-color 480ms cubic-bezier(.22, 1, .36, 1),25    box-shadow 480ms cubic-bezier(.22, 1, .36, 1);26}27.social-highlight-card__glow {28  position: absolute;29  z-index: -1;30  inset: 0;31  background: radial-gradient(32    ellipse 78% 92% at 50% -4%,33    color-mix(in srgb, currentColor 38%, transparent) 0%,34    color-mix(in srgb, currentColor 16%, transparent) 38%,35    transparent 76%36  );37  opacity: .2;38  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);39}40.social-highlight-card__beam {41  position: absolute;42  top: 4px;43  right: 8px;44  left: 8px;45  height: 4px;46  border-radius: 999px;47  background: currentColor;48  opacity: .3;49  transform: scaleX(.96);50  transition:51    transform 480ms cubic-bezier(.22, 1, .36, 1),52    opacity 480ms cubic-bezier(.22, 1, .36, 1);53}54.social-highlight-card__icon {55  display: grid;56  width: 30px;57  height: 30px;58  place-items: center;59  color: light-dark(#dde0e6,#0d0e13);60  opacity: .82;61  transform: scale(.96);62  transition:63    color 480ms cubic-bezier(.22, 1, .36, 1),64    opacity 480ms cubic-bezier(.22, 1, .36, 1),65    transform 480ms cubic-bezier(.22, 1, .36, 1);66}67.social-highlight-card__icon svg {68  width: 100%;69  height: 100%;70}71.social-highlight-card:hover,72.social-highlight-card:focus-visible {73  border-color: color-mix(in srgb, currentColor 28%, light-dark(rgba(20, 24, 30, .08), rgba(255, 255, 255, .08)));74  background: light-dark(#f0f2f5,#181920);75  box-shadow:76    inset 0 1px 0 light-dark(rgba(20, 24, 30, .06), rgba(255, 255, 255, .06)),77    0 10px 24px light-dark(rgba(246, 247, 249, .28), rgba(0, 0, 0, .28)),78    0 0 22px color-mix(in srgb, var(--social-highlight) 12%, transparent);79}80.social-highlight-card:hover .social-highlight-card__glow,81.social-highlight-card:focus-visible .social-highlight-card__glow {82  opacity: 1;83}84.social-highlight-card:hover .social-highlight-card__beam,85.social-highlight-card:focus-visible .social-highlight-card__beam {86  opacity: 1;87  transform: scaleX(1);88}89.social-highlight-card:hover .social-highlight-card__icon,90.social-highlight-card:focus-visible .social-highlight-card__icon {91  color: inherit;92  opacity: 1;93  transform: scale(1);94}95.social-highlight-card:focus-visible {96  outline: 2px solid currentColor;97  outline-offset: 4px;98}99@media (max-width: 420px) {100  .social-highlight-cards {101  gap: 10px;102}103  .social-highlight-card {104  width: 56px;105  height: 56px;106}107  .social-highlight-card__icon {108  width: 27px;109  height: 27px;110}111}112@media (prefers-reduced-motion: reduce) {113  .social-highlight-card,114  .social-highlight-card__glow,115  .social-highlight-card__beam,116  .social-highlight-card__icon {117  transition-duration: .01ms;118}119}