Auth Social Accounts

1"use client";
2 
3import { IconBrandGithub } from "@tabler/icons-react";
4import {
5  CheckCircle2,
6  ExternalLink,
7  Loader2,
8  Unlink,
9  XCircle,
10} from "lucide-react";
11import { cn } from "@/lib/utils";
12import {
13  AlertDialog,
14  AlertDialogAction,
15  AlertDialogCancel,
16  AlertDialogContent,
17  AlertDialogDescription,
18  AlertDialogFooter,
19  AlertDialogHeader,
20  AlertDialogTitle,
21  AlertDialogTrigger,
22} from "@/registry/new-york/ui/alert-dialog";
23import { Badge } from "@/registry/new-york/ui/badge";
24import { Button } from "@/registry/new-york/ui/button";
25import {
26  Card,
27  CardContent,
28  CardDescription,
29  CardHeader,
30  CardTitle,
31} from "@/registry/new-york/ui/card";
32 
33export type SocialProvider =
34  | "google"
35  | "github"
36  | "apple"
37  | "microsoft"
38  | "twitter";
39 
40export interface SocialAccount {
41  provider: SocialProvider;
42  email?: string;
43  name?: string;
44  isConnected: boolean;
45  isVerified?: boolean;
46  isPrimary?: boolean;
47  connectedAt?: Date;
48}
49 
50function formatConnectedDate(date: Date): string {
51  const year = date.getFullYear();
52  const month = date.toLocaleString("en-US", { month: "short" });
53  const day = date.getDate();
54  return `${month} ${day}, ${year}`;
55}
56 
57export interface AuthSocialAccountsProps {
58  accounts?: SocialAccount[];
59  onConnect?: (provider: SocialProvider) => void;
60  onDisconnect?: (provider: SocialProvider) => void;
61  onSetPrimary?: (provider: SocialProvider) => void;
62  className?: string;
63  isLoading?: boolean;
64  errors?: {
65    general?: string;
66  };
67}
68 
69const GoogleIcon = ({ className }: { className?: string }) => (
70  <svg
71    className={className}
72    viewBox="0 0 24 24"
73    xmlns="http://www.w3.org/2000/svg"
74  >
75    <path
76      d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1-1.265.06a6 6 0 1 0 2.103 6.836l.001-.004h-3.66a1 1 0 0 1-.992-.883L13 13v-2a1 1 0 0 1 1-1h6.945a1 1 0 0 1 .994.89q.06.55.061 1.11c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2"
77      fill="currentColor"
78    />
79  </svg>
80);
81 
82const PROVIDER_CONFIG: Record<
83  SocialProvider,
84  {
85    name: string;
86    icon: React.ComponentType<{ className?: string }>;
87    color: string;
88  }
89> = {
90  google: {
91    name: "Google",
92    icon: GoogleIcon,
93    color: "text-blue-600",
94  },
95  github: {
96    name: "GitHub",
97    icon: IconBrandGithub,
98    color: "text-foreground",
99  },
100  apple: {
101    name: "Apple",
102    icon: ({ className }: { className?: string }) => (
103      <svg
104        className={className}
105        viewBox="0 0 24 24"
106// … truncated