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 from '@mui/icons-material/Image';

import Create from '@mui/icons-material/Create';

import Article from '@mui/icons-material/Article';

import PostAdd from '@mui/icons-material/PostAdd';

import Subscriptions from '@mui/icons-material/Subscriptions';

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

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

import Widget from '@app/components/UI/Widget';

import Input from '@components/UI/inputs/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 (

    <Widget>

      <Widget.Body>

        <Box

          sx={{

            display: 'flex',

            alignItems: 'center',

            marginBottom: 0.5,

            gap: 0.5

          }}

        >

          <Avatar

            src={image}

            sx={{

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

              height: { xs: 40, sm: 50 }

            }}

          />

          <Input

            type='text'

            placeholder={labels.what_are_you_thinking}

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

            icon={<Create />}

            variant='search'

            readOnly

          />

        </Box>

        <Box

          sx={{

            display: 'flex',

            justifyContent: 'space-between',

            gap: 0.5

          }}

        >

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

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

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

          </Option>

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

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

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

          </Option>

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

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

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

          </Option>

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

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

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

          </Option>

        </Box>

      </Widget.Body>

    </Widget>

  );

};

export default ShareComponent;