Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useDispatch, useSelector } from 'react-redux'

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

import {

  Image,

  Create,

  Article,

  PostAdd,

  Subscriptions

} from '@mui/icons-material'

import { openShareModal } from '@app/redux/share-modal/shareModal.actions'

import { shareModalTypes } from '@app/redux/share-modal/shareModal.types'

import WidgetWrapper from '@app/components/widgets/WidgetLayout'

import Input from '@app/components/UI/Input'

const Option = styled(Button)(({ theme }) => ({

  borderRadius: '50%',

  cursor: 'pointer',

  padding: 5,

  minWidth: 'auto',

  span: {

    display: 'none'

  },

  '&:hover': {

    backgroundColor: 'whitesmoke'

  },

  [theme.breakpoints.up('md')]: {

    alignItems: 'center',

    borderRadius: theme.shape.borderRadius,

    display: 'inline-flex',

    gap: 1,

    flex: 1,

    span: {

      display: 'initial'

    }

  }

}))

const ShareComponent = ({ feedType, postUrl = '', image = '' }) => {

  const labels = useSelector(({ intl }) => intl.labels)

  const dispatch = useDispatch()

  const onClickHandler = (postType) =>

    dispatch(openShareModal(postUrl, postType, feedType))

  return (

    <WidgetWrapper p={1}>

      <Box display='flex' alignItems='center' gap={1} mb={1}>

        <Avatar

          src={image}

          sx={{

            width: { xs: 40, sm: 50 },

            height: { xs: 40, sm: 50 }

          }}

        />

        <Input

          type='text'

          readOnly

          icon={Create}

          placeholder={labels.what_are_you_thinking}

          onClick={() => onClickHandler(shareModalTypes.POST)}

          sx={{ width: '100%' }}

          primary={false}

        />

      </Box>

      <Box display='flex' gap={1} justifyContent='space-between'>

        <Option onClick={() => onClickHandler(shareModalTypes.IMAGE)}>

          <Image sx={{ color: '#7405f9 !important' }} />

          <Typography variant='body2'>{labels.image}</Typography>

        </Option>

        <Option onClick={() => onClickHandler(shareModalTypes.VIDEO)}>

          <Subscriptions sx={{ color: '#E7A33E !important' }} />

          <Typography variant='body2'>{labels.video}</Typography>

        </Option>

        <Option onClick={() => onClickHandler(shareModalTypes.FILE)}>

          <Article sx={{ color: '#C0C8CD !important' }} />

          <Typography variant='body2'>{labels.document}</Typography>

        </Option>

        <Option onClick={() => onClickHandler(shareModalTypes.POST)}>

          <PostAdd sx={{ color: '#7FC15E !important' }} />

          <Typography variant='body2'>{labels.write}</Typography>

        </Option>

      </Box>

    </WidgetWrapper>

  )

}

export default ShareComponent