Social Login Buttons

import { SocialLoginButtons } from "@/components/ui/social-login-buttons";

export default function Example() {
  return <SocialLoginButtons />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const providers = {
  google: { label: "Google", bg: "bg-white border hover:bg-gray-50", text: "text-gray-700", icon: "G" },
  github: { label: "GitHub", bg: "bg-[#24292e] hover:bg-[#2f363d]", text: "text-white", icon: "GH" },
  twitter: { label: "Twitter", bg: "bg-[#1da1f2] hover:bg-[#1a91da]", text: "text-white", icon: "𝕏" },
  facebook: { label: "Facebook", bg: "bg-[#1877f2] hover:bg-[#166fe5]", text: "text-white", icon: "f" },
  apple: { label: "Apple", bg: "bg-black hover:bg-gray-900", text: "text-white", icon: "" },
};

const SocialLoginButtons = forwardRef(({ className, enabledProviders = ["google", "github"], onLogin, ...props }, ref) => (
  <div ref={ref} className={cn("space-y-2", className)} {...props}>
    {enabledProviders.map((p) => {
      const config = providers[p] || { label: p, bg: "bg-muted", text: "text-foreground", icon: p[0] };
      return (
        <button key={p} onClick={() => onLogin?.(p)}
          className={cn("flex h-10 w-full items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors", config.bg, config.text)}
        >
          <span className="text-base font-bold">{config.icon}</span>
          Continue with {config.label}
        </button>
      );
    })}
  </div>
));
SocialLoginButtons.displayName = "SocialLoginButtons";

export { SocialLoginButtons };