<div class="space-y-3">
    <flux:text class="text-center text-xs uppercase tracking-wider text-zinc-500 dark:text-zinc-400">
        Or continue with
    </flux:text>

    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
        <a
            href="{{ route('auth.social.redirect', 'google') }}"
            class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
        >
            <svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="#EA4335" d="M12 10.2v3.9h5.5c-.2 1.2-1.4 3.6-5.5 3.6-3.3 0-6-2.7-6-6s2.7-6 6-6c1.9 0 3.2.8 3.9 1.5l2.7-2.6C16.9 2.9 14.7 2 12 2 6.5 2 2 6.5 2 12s4.5 10 10 10c5.8 0 9.7-4.1 9.7-9.8 0-.7-.1-1.3-.2-1.9H12z"/>
            </svg>
            Google
        </a>

        <a
            href="{{ route('auth.social.redirect', 'apple') }}"
            class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
        >
            <svg class="h-4 w-4 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M15.2 2c.1 1.1-.4 2.1-1 2.8-.7.8-1.8 1.4-2.9 1.3-.1-1.1.4-2.2 1-2.8.7-.8 1.9-1.4 2.9-1.3zm3.8 16.2c-.5 1.1-.8 1.6-1.5 2.6-.9 1.3-2.1 2.9-3.6 2.9-1.3 0-1.6-.9-3.4-.9s-2.2.9-3.5.9c-1.5 0-2.6-1.4-3.5-2.7-2.5-3.7-2.7-8-1.2-10.4 1.1-1.8 2.9-2.9 4.6-2.9 1.8 0 2.9 1 3.4 1s1.9-1.2 4-1c.9 0 3.2.4 4.7 2.5-.1.1-2.8 1.6-2.8 4.8 0 3.8 3.3 5 3.4 5.2z"/>
            </svg>
            Apple
        </a>

        <a
            href="{{ route('auth.social.redirect', 'facebook') }}"
            class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
        >
            <svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="#1877F2" d="M24 12a12 12 0 1 0-13.9 11.9v-8.4H7v-3.5h3.1V9.4c0-3 1.8-4.7 4.5-4.7 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9v2.2h3.4l-.5 3.5h-2.9v8.4A12 12 0 0 0 24 12z"/>
            </svg>
            Facebook
        </a>
    </div>
</div>
