"use client";

import * as React from "react";

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

export interface SocialLoginProvider {
  id: string;
  label: string;
  onClick?: () => void;
  icon: React.ReactNode;
}

export interface SocialLoginButtonsProps
  extends React.HTMLAttributes<HTMLDivElement> {
  providers?: SocialLoginProvider[];
  showDivider?: boolean;
  dividerLabel?: string;
}

const GoogleIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.8}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M12 5a7 7 0 1 0 6.6 9.2H12" />
    <path d="M12 12h7" />
  </svg>
);

const GitHubIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M12 2c-5.5 0-10 4.4-10 9.9 0 4.4 2.9 8.1 6.8 9.4.5.1.7-.2.7-.5v-2c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.6-1.1-1.6-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .8.1-.7.4-1.1.7-1.4-2.2-.2-4.5-1.1-4.5-4.9 0-1.1.4-2 1.1-2.7-.1-.3-.5-1.3.1-2.7 0 0 .9-.3 2.8 1a9.7 9.7 0 0 1 5.1 0c1.9-1.3 2.8-1 2.8-1 .6 1.4.2 2.4.1 2.7.7.7 1.1 1.6 1.1 2.7 0 3.9-2.3 4.7-4.6 4.9.4.3.7.9.7 1.8v2.7c0 .3.2.6.7.5a9.9 9.9 0 0 0 6.8-9.4C22 6.4 17.5 2 12 2z" />
  </svg>
);

const AppleIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M16.7 12.7c0-2 1.6-3 1.7-3.1-1-.1-2.2-.7-2.8-1.5-.8-.9-1.6-1-2.2-1-1.2 0-2.2.6-2.8.6-.7 0-1.4-.6-2.4-.6-1.2 0-2.4.7-3 1.7-1.3 1.9-.3 4.9.9 6.5.6.8 1.3 1.7 2.2 1.6.9 0 1.2-.5 2.2-.5 1 0 1.3.5 2.2.5.9 0 1.5-.8 2.1-1.6.7-.9 1-1.8 1-1.9-.1 0-2.1-.8-2.1-3.2z" />
    <path d="M14.9 4.4c.5-.6.9-1.5.8-2.4-.8 0-1.8.6-2.3 1.2-.5.6-.9 1.5-.8 2.4.8 0 1.8-.5 2.3-1.2z" />
  </svg>
);

const DiscordIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M9.5 11.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
    <path d="M14.5 11.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
    <path d="M5.5 16c1.5 2 4 3 6.5 3s5-1 6.5-3" />
    <path d="M18 7c-1.5-1-3.5-2-6-2s-4.5 1-6 2" />
    <path d="M8 20l-1.5-4.5c-1-.5-2-2-2-3.5 0-2.5 1-4.5 2-5.5l1-3h9l1 3c1 1 2 3 2 5.5 0 1.5-1 3-2 3.5L16 20" />
  </svg>
);

const defaultSocialProviders: SocialLoginProvider[] = [
  {
    id: "google",
    label: "Continue with Google",
    icon: <GoogleIcon className="h-4 w-4" />,
  },
  {
    id: "github",
    label: "Continue with GitHub",
    icon: <GitHubIcon className="h-4 w-4" />,
  },
  {
    id: "apple",
    label: "Continue with Apple",
    icon: <AppleIcon className="h-4 w-4" />,
  },
  {
    id: "discord",
    label: "Continue with Discord",
    icon: <DiscordIcon className="h-4 w-4" />,
  },
];

export function SocialLoginButtons({
  className,
  providers,
  showDivider = true,
  dividerLabel = "Or continue with",
  ...props
}: SocialLoginButtonsProps) {
  const items = providers ?? defaultSocialProviders;

  return (
    <div className={cn("space-y-3", className)} {...props}>
      {showDivider ? (
        <div className="flex items-center gap-3 text-xs text-muted-foreground">
          <span className="flex-1 border-t border-border" />
          <span>{dividerLabel}</span>
          <span className="flex-1 border-t border-border" />
        </div>
      ) : null}
      <div className="grid gap-2">
        {items.map((provider) => (
          <button
            key={provider.id}
            type="button"
            onClick={provider.onClick}
            className={cn(
              "flex w-full items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors",
              "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
          >
            <span className="flex h-4 w-4 items-center justify-center">
              {provider.icon}
            </span>
            <span>{provider.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}
Social Login Buttons

Dependencies

Files

Installation
