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: "40px", height: "40px" }} />

        <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;