Components/Social Media Buttons

All Buttons

'use client'

import { FcGoogle } from 'react-icons/fc'
import { FaFacebook } from 'react-icons/fa'
import { SiLinkedin, SiMessenger } from 'react-icons/si'
import { Box, Button, Center, Stack, Text } from '@chakra-ui/react'

export default function All() {
  return (
    <Center p={8}>
      <Stack spacing={2} align={'center'} maxW={'md'} w={'full'}>
        {/* Facebook */}
        <Button w={'full'} colorScheme={'facebook'} leftIcon={<FaFacebook />}>
          <Center>
            <Text>Continue with Facebook</Text>
          </Center>
        </Button>

        {/* Google */}
        <Button w={'full'} variant={'outline'} leftIcon={<FcGoogle />}>
          <Center>
            <Text>Sign in with Google</Text>
          </Center>
        </Button>

        {/* LinkedIn */}
        <Button w={'full'} colorScheme={'messenger'} leftIcon={<SiLinkedin />}>
          <Center>
            <Text>Send to Linkedin</Text>
          </Center>
        </Button>

        {/* Messenger */}
        <Button w={'full'} colorScheme={'messenger'} leftIcon={<SiMessenger />}>
          <Center>
            <Text>Send to Messenger</Text>
          </Center>
        </Button>
      </Stack>
    </Center>
  )
}

Messenger Button

'use client'

import { SiMessenger } from 'react-icons/si'
import { Button, Center, Text } from '@chakra-ui/react'

export default function MessengerButton() {
  return (
    <Center p={8}>
      <Button w={'full'} maxW={'md'} colorScheme={'messenger'} leftIcon={<SiMessenger />}>
        <Center>
          <Text>Send to Messenger</Text>
        </Center>
      </Button>
    </Center>
  )
}

Facebook Button

'use client'

import { FaFacebook } from 'react-icons/fa'
import { Button, Center, Text } from '@chakra-ui/react'

export default function FacebookButton() {
  return (
    <Center p={8}>
      <Button w={'full'} maxW={'md'} colorScheme={'facebook'} leftIcon={<FaFacebook />}>
        <Center>
          <Text>Continue with Facebook</Text>
        </Center>
      </Button>
    </Center>
  )
}

LinkedIn Button

'use client'

import { SiLinkedin } from 'react-icons/si'
import { Button, Center, Text } from '@chakra-ui/react'

export default function LinkedinButton() {
  return (
    <Center p={8}>
      <Button w={'full'} maxW={'md'} colorScheme={'messenger'} leftIcon={<SiLinkedin />}>
        <Center>
          <Text>Send to Linkedin</Text>
        </Center>
      </Button>
    </Center>
  )
}

Google Button

'use client'

import { FcGoogle } from 'react-icons/fc'
import { Button, Center, Text } from '@chakra-ui/react'

export default function GoogleButton() {
  return (
    <Center p={8}>
      <Button w={'full'} maxW={'md'} variant={'outline'} leftIcon={<FcGoogle />}>
        <Center>
          <Text>Sign in with Google</Text>
        </Center>
      </Button>
    </Center>
  )
}