Social Auth Card

import SocialAuthCard from "@/components/ruixen/social-auth-card";
import { FaGoogle, FaGithub, FaTwitter } from "react-icons/fa";
 
export default function App() {
  const socialProviders = [
    {
      id: "google",
      label: "Continue with Google",
      icon: <FaGoogle />,
      colorClass: "bg-red-500",
      textColorClass: "text-white",
      onClick: () => console.log("Google login"),
    },
    {
      id: "github",
      label: "Continue with GitHub",
      icon: <FaGithub />,
      colorClass: "bg-gray-800",
      textColorClass: "text-white",
      onClick: () => console.log("GitHub login"),
    },
  ];
 
  const handleChange = (values: Record<string, string>) => {
    console.log("Form values:", values);
  };
 
  const handleSubmit = (values: Record<string, string>) => {
    console.log("Form submitted:", values);
  };
 
  return (
    <SocialAuthCard
      socialProviders={socialProviders}
      formInputs={[
        {
          id: "email",
          type: "email",
          label: "Email",
          placeholder: "you@example.com",
        },
        {
          id: "password",
          type: "password",
          label: "Password",
          placeholder: "********",
        },
      ]}
      buttonLabel="Sign In"
      onChange={handleChange}
      onSubmit={handleSubmit}
    />
  );
}

export interface SocialProvider {
  id: string;
  label: string;
  icon: React.ReactNode;
  colorClass?: string; // Tailwind background color
  textColorClass?: string; // Tailwind text color
  onClick?: () => void;
}

export interface FormInput {
  id: string;
  type: string;
  label: string;
  placeholder?: string;
}