Social Links

import { ReactNode } from "react";
import Link from "next/link";
import { FaLinkedin } from "react-icons/fa6";
import { FaGithub } from "react-icons/fa6";
import { FaSquareXTwitter } from "react-icons/fa6";

export default function SocialLinks() {
  return (
    <>
      {socialMedias.map((social) => (
        <Link
          href={social.url}
          className="text-3xl hover:text-spotify-green"
          key={social.title}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={`Visit my ${social.title} profile`}
        >
          {social.icon}
        </Link>
      ))}
    </>
  );
}

const socialMedias = [
  {
    title: "Github",
    url: "https://github.com/LuaanNguyen",
    icon: <FaGithub />,
  },
  {
    title: "Linkedin",
    url: "https://www.linkedin.com/in/luaanng",
    icon: <FaLinkedin />,
  },
  {
    title: "X",
    url: "https://x.com/luaan_ng",
    icon: <FaSquareXTwitter />,
  },
];

type socialMediasProps = {
  title: string;
  url: string;
  icon: ReactNode;
}[];

import SocialLinks from "../SocialLinks";

export default function ProfileCard() {
  return (
    <div>
      {/* ... other content ... */}
      <div className="flex gap-4">
        <SocialLinks />
      </div>
    </div>
  );
}

{
  "dependencies": {
    "react-icons": "^5.2.1"
  }
}

import { FaInstagram } from "react-icons/fa6";

const socialMedias = [
  // ... existing links
  {
    title: "Instagram",
    url: "https://instagram.com/yourhandle",
    icon: <FaInstagram />,
  },
];