Auth Card

1import type React from "react";
2import { Button } from "@/components/ui/button";
3import { Input } from "@/components/ui/input";
4import { Label } from "@/components/ui/label";
5import { Separator } from "@/components/ui/separator";
6import { cn } from "@/lib/utils";
7 
8interface AuthProvider {
9  name: string;
10  icon: React.ReactNode;
11}
12 
13interface AuthCardProps extends React.ComponentProps<"div"> {
14  title?: string;
15  description?: string;
16  showEmail?: boolean;
17  socialProviders?: AuthProvider[];
18  walletProviders?: AuthProvider[];
19}
20 
21// --- Default provider icons ---
22 
23const GoogleIcon = () => (
24  <svg
25    viewBox="0 0 24 24"
26    className="size-4"
27    fill="currentColor"
28    role="img"
29    aria-label="Google"
30  >
31    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
32  </svg>
33);
34 
35const XIcon = () => (
36  <svg
37    viewBox="0 0 24 24"
38    className="size-4"
39    fill="currentColor"
40    role="img"
41    aria-label="X"
42  >
43    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
44  </svg>
45);
46 
47const AppleIcon = () => (
48  <svg
49    viewBox="0 0 24 24"
50    className="size-4"
51    fill="currentColor"
52    role="img"
53    aria-label="Apple"
54  >
55    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
56  </svg>
57);
58 
59const PhantomIcon = () => (
60  <svg
61    viewBox="0 0 512 512"
62    className="size-4"
63    fill="currentColor"
64    role="img"
65    aria-label="Phantom"
66  >
67// … truncated