Social Button

"use client";

import { SocialButton } from "@/components/miyuki-ui/social-button";

export default function SocialButtonDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2.5">
      <SocialButton provider="google" className="w-full" />
      <SocialButton provider="apple" className="w-full" />
      <SocialButton provider="github" className="w-full" />
    </div>
  );
}

"use client";

import { SocialButton, type SocialProvider, socialProviders } from "@/components/miyuki-ui/social-button";

const providers = Object.keys(socialProviders) as SocialProvider[];

export default function SocialButtonAllDemo() {
  return (
    <div className="grid grid-cols-6 gap-2 sm:grid-cols-8">
      {providers.map((provider) => (
        <SocialButton key={provider} provider={provider} variant="icon" />
      ))}
    </div>
  );
}

"use client";

import { SocialButton, type SocialProvider } from "@/components/miyuki-ui/social-button";

const providers: SocialProvider[] = ["line", "yahoo", "apple", "google", "kakao", "discord"];

export default function SocialButtonSolidDemo() {
  return (
    <div className="grid w-full max-w-lg gap-2.5 sm:grid-cols-2">
      {providers.map((provider) => (
        <SocialButton key={provider} provider={provider} variant="solid" className="w-full" />
      ))}
    </div>
  );
}