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' }} />
          <Typography variant='body2'>{labels.image}</Typography>
        </Option>

        <Option onClick={() => onClickHandler(shareModalTypes.VIDEO)}>
          <Subscriptions sx={{ color: '#E7A33E' }} />
          <Typography variant='body2'>{labels.video}</Typography>
        </Option>

        <Option onClick={() => onClickHandler(shareModalTypes.FILE)}>
          <Article sx={{ color: '#C0C8CD' }} />
          <Typography variant='body2'>{labels.document}</Typography>
        </Option>

        <Option onClick={() => onClickHandler(shareModalTypes.POST)}>
          <PostAdd sx={{ color: '#7FC15E' }} />
          <Typography variant='body2'>{labels.write}</Typography>
        </Option>
      </Box>
    </WidgetWrapper>
  )
}

export default ShareComponent