Proyectos de Subversion LeadersLinked - SPA

import React from "react";

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

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

import { useDispatch, useSelector } from "react-redux";

import styled from "styled-components";

import Avatar from "@mui/material/Avatar";

import ImageIcon from "@mui/icons-material/Image";

import CreateIcon from "@mui/icons-material/Create";

import ArticleIcon from "@mui/icons-material/Article";

import PostAddIcon from "@mui/icons-material/PostAdd";

import SubscriptionsIcon from "@mui/icons-material/Subscriptions";

import Input from "../../../UI/Input";

import ShareOption from "./ShareOption";

import styles from "./ShareComponent.module.scss";

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 (

    <div className={styles.share__container}>

      <div className={styles.input__container}>

        <Avatar src={image} sx={{ width: "50px", height: "50px" }} />

        <StyledInput

          type="text"

          readOnly

          icon={CreateIcon}

          placeholder={labels.what_are_you_thinking}

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

        />

      </div>

      <div className={styles.share__options}>

        <ShareOption

          icon={ImageIcon}

          title={labels.image}

          color="#7405f9"

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

        />

        <ShareOption

          icon={SubscriptionsIcon}

          title={labels.video}

          color="#E7A33E"

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

        />

        <ShareOption

          icon={ArticleIcon}

          title={labels.document}

          color="#C0C8CD"

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

        />

        <ShareOption

          icon={PostAddIcon}

          title={labels.write}

          color="#7FC15E"

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

        />

      </div>

    </div>

  );

};

export default ShareComponent;