Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useSelector } from 'react-redux'

import { Button, styled } from '@mui/material'

import List from '@components/common/list'

import { FacebookIcon, GoogleIcon, XIcon } from '@components/common/icons'

const SocialButton = styled(Button)`

  background-color: white;

  border: 1px solid black;

  padding: 0.5rem 1rem;

  font-size: 1rem;

  color: #383838;

  width: 100%;

  box-sizing: border-box;

  margin-bottom: 10px;

  svg {

    width: 16px;

    height: 16px;

  }

`

export default function SocialNetworksSignin({

  facebookOauth = '/signin/facebook',

  twitterOauth = '/signin/twitter',

  googleOauth = '/signin/google'

}) {

  const { access_usign_social_networks } = useSelector((state) => state.auth)

  const socialNetworksAccessAllowed = access_usign_social_networks === 'y'

  const options = [

    { label: 'Facebook', icon: <FacebookIcon />, href: facebookOauth },

    { label: 'Twitter', icon: <XIcon />, href: twitterOauth },

    { label: 'Google', icon: <GoogleIcon />, href: googleOauth }

  ]

  if (!socialNetworksAccessAllowed) return

  return (

    <List

      items={options}

      renderItem={({ icon, label }) => (

        <SocialButton>

          {icon}

          {label}

        </SocialButton>

      )}

    />

  )

}