personal-site/components/SocialLinks.js

import Icon from './Icon';
import { socials } from '../data/profile';

export default function SocialLinks({ variant = 'icons' }) {
  return (
    <div className={`social-links social-links-${variant}`}>
      {socials.map((social) => (
        <a
          key={social.name}
          href={social.url}
          target="_blank"
          rel="noopener noreferrer"
          className={variant === 'icons' ? 'icon-button' : 'social-link'}
          aria-label={social.name}
        >
          <Icon name={social.icon} size={variant === 'icons' ? 16 : 18} />
          {variant !== 'icons' && <span>{social.name}</span>}
        </a>
      ))}
    </div>
  );
}