"use client"; import { CheckCircle2, ExternalLink, Github, Loader2, Unlink, XCircle, } from "lucide-react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/new-york/ui/alert-dialog"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; export type SocialProvider = | "google" | "github" | "apple" | "microsoft" | "twitter"; export interface SocialAccount { provider: SocialProvider; email?: string; name?: string; isConnected: boolean; isVerified?: boolean; isPrimary?: boolean; connectedAt?: Date; } function formatConnectedDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } export interface AuthSocialAccountsProps { accounts?: SocialAccount[]; onConnect?: (provider: SocialProvider) => void; onDisconnect?: (provider: SocialProvider) => void; onSetPrimary?: (provider: SocialProvider) => void; className?: string; isLoading?: boolean; errors?: { general?: string; }; } const GoogleIcon = ({ className }: { className?: string }) => ( ); const PROVIDER_CONFIG: Record< SocialProvider, { name: string; icon: React.ComponentType<{ className?: string }>; color: string; } > = { google: { name: "Google", icon: GoogleIcon, color: "text-blue-600", }, github: { name: "GitHub", icon: Github, color: "text-foreground", }, apple: { name: "Apple", icon: ({ className }: { className?: string }) => ( ), color: "text-foreground", }, microsoft: { name: "Microsoft", icon: ({ className }: { className?: string }) => ( ), color: "text-foreground", }, twitter: { name: "Twitter", icon: ({ className }: { className?: string }) => ( ), color: "text-blue-500", }, }; interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface EmptyStateProps { message?: string; } function EmptyState({ message = "No social accounts available", }: EmptyStateProps) { return (

{message}

); } interface DisconnectDialogProps { isLoading: boolean; onDisconnect: (provider: SocialProvider) => void; providerName: string; provider: SocialProvider; } function DisconnectDialog({ isLoading, onDisconnect, providerName, provider, }: DisconnectDialogProps) { return ( Disconnect {providerName}? This will disconnect your {providerName} account. You'll need to reconnect it to use it for sign-in again. Cancel onDisconnect(provider)} > Disconnect ); } interface ConnectButtonProps { isLoading: boolean; onConnect: (provider: SocialProvider) => void; provider: SocialProvider; providerName: string; } function ConnectButton({ isLoading, onConnect, provider, providerName, }: ConnectButtonProps) { return ( ); } interface SetPrimaryButtonProps { isLoading: boolean; onSetPrimary: (provider: SocialProvider) => void; provider: SocialProvider; providerName: string; } function SetPrimaryButton({ isLoading, onSetPrimary, provider, providerName, }: SetPrimaryButtonProps) { return ( ); } interface SocialAccountItemProps { account: SocialAccount; isLoading: boolean; onConnect?: (provider: SocialProvider) => void; onDisconnect?: (provider: SocialProvider) => void; onSetPrimary?: (provider: SocialProvider) => void; } function SocialAccountItem({ account, onConnect, onDisconnect, onSetPrimary, isLoading, }: SocialAccountItemProps) { const config = PROVIDER_CONFIG[account.provider]; const Icon = config.icon; return (

{config.name}

{account.isPrimary && ( Primary )} {account.isVerified && account.isConnected && (

{account.email && (

{account.email}

)} {account.connectedAt && (

Connected {formatConnectedDate(account.connectedAt)}

)}

{account.isConnected ? ( <> {!account.isPrimary && onSetPrimary && ( )} {onDisconnect && ( )} ) : ( onConnect && ( ) )}

); } const DEFAULT_ACCOUNTS: SocialAccount[] = [ { provider: "google", isConnected: false }, { provider: "github", isConnected: false }, { provider: "apple", isConnected: false }, { provider: "microsoft", isConnected: false }, ]; function getDisplayAccounts(accounts: SocialAccount[]): SocialAccount[] { if (accounts.length > 0) { return accounts; } return DEFAULT_ACCOUNTS.filter( (acc) => !accounts.some((a) => a.provider === acc.provider) ); } export default function AuthSocialAccounts({ accounts = [], onConnect, onDisconnect, onSetPrimary, className, isLoading = false, errors, }: AuthSocialAccountsProps) { const displayAccounts = getDisplayAccounts(accounts); return ( Connected accounts Manage your social account connections for sign-in

{errors?.general && } {displayAccounts.length === 0 ? ( ) : (

{displayAccounts.map((account) => ( ))}

)}

); }

Google

GitHub

Example Usage

Google

GitHub