Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

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

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

import {

  Image,

  Create,

  Article,

  PostAdd,

  Subscriptions

} from '@mui/icons-material'

import styled from 'styled-components'

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

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

import Input from 'components/UI/Input'

import WidgetWrapper from 'components/widgets/WidgetLayout'

import ShareOption from './ShareOption'

const StyledInput = styled(Input)`

  border: 1px solid lightgray;

  background-color: #fff;

  border-radius: 30px;

  padding: 5px;

  padding-left: 1rem;

  flex: 1;

  cursor: pointer;

  &:hover {

    background-color: rgba(0, 0, 0, 0.08);

  }

`

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 }

          }}

        />

        <StyledInput

          type='text'

          readOnly

          icon={Create}

          placeholder={labels.what_are_you_thinking}

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

        />

      </Box>

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

        <ShareOption

          icon={Image}

          title={labels.image}

          color='#7405f9'

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

        />

        <ShareOption

          icon={Subscriptions}

          title={labels.video}

          color='#E7A33E'

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

        />

        <ShareOption

          icon={Article}

          title={labels.document}

          color='#C0C8CD'

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

        />

        <ShareOption

          icon={PostAdd}

          title={labels.write}

          color='#7FC15E'

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

        />

      </Box>

    </WidgetWrapper>

  )

}

export default ShareComponent