Social Icons

npm i clsx tailwind-merge

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";
import { cn } from "@/lib/utils";
import {
  IconBrandDiscord,
  IconBrandGithub,
  IconBrandLinkedin,
  IconBrandX,
} from "@tabler/icons-react";

interface SocialIconProps {
  icon: React.ReactNode;
  className?: string;
  bgGradient: string;
  onClick?: () => void;
  size?: number;
}

// Reusable Single Icon Component
export function SocialIcon({
  icon,
  className,
  bgGradient,
  onClick,
  size = 80,
}: SocialIconProps) {
  return (
    <div
      className={cn("rounded-2xl relative", className)}
      style={{ width: size, height: size }}
    >
      <div
        className="absolute inset-0 z-20 rounded-2xl ring-2 ring-[#1e293b]"
        style={{ background: bgGradient }}
      />
      <button
        onClick={onClick} // ✅ move click handler here!
        className="w-full h-full absolute z-30 rounded-2xl p-4 flex items-center justify-center"
      >
        {icon}
      </button>
    </div>
  );
}


// Full Icon Set Component
export default function SocialIconSet() {
  const icons = [
    {
      name: "Discord",
      icon: <IconBrandDiscord size={40} stroke={1} color="#ffedd5" />,
      bg: "radial-gradient(circle at bottom, #4a044e, #000000)",
      onClick: () => window.open("https://discord.com/","_blank"),
    },
    {
      name: "GitHub",
      icon: <IconBrandGithub size={40} stroke={1} color="#fef9c3" />,
      bg: "radial-gradient(circle at bottom, #4b5563, #000000)",
      onClick: () => window.open("https://github.com/","_blank"),
    },
    {
      name: "LinkedIn",
      icon: <IconBrandLinkedin size={40} stroke={1} color="#ffedd5" />,
      bg: "radial-gradient(circle at bottom, #0c4a6e, #000000)",
      onClick: () => window.open("https://www.linkedin.com/","_blank"),
    },
    {
      name: "X",
      icon: <IconBrandX size={30} stroke={1} color="#ffedd5" />,
      bg: "radial-gradient(circle at bottom, #1e293b, #000000)",
      onClick: () => window.open("https://x.com/home","_blank"),
    },
  ];

  return (
    <div className="flex gap-4 flex-wrap">
      {icons.map((iconData, i) => (
        <SocialIcon
          key={i}
          icon={iconData.icon}
          bgGradient={iconData.bg}
          onClick={iconData.onClick}
        />
      ))}
    </div>
  );
}