@proca/widget/src/components/eci/ReadMore.js

Proca is an open-source campaign toolkit designed to empower activists and organisations in their digital advocacy efforts. It provides a flexible and customisable platform for creating and managing online petitions, email campaigns, and other forms of di

import React, { useState } from "react";

import { Button } from "@material-ui/core";
import { useTranslation } from "./hooks/useEciTranslation";

import TTag from "@components/TTag";
import Dialog from "@components/Dialog";
import Details from "./Details";
import { scrollTo } from "@lib/scroll";
//import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import MoreIcon from "@material-ui/icons/MoreHoriz";

const ReadMore = () => {
  const [open, setOpen] = useState(false);
  const [details, showDetails] = useState(false);
  const { t } = useTranslation();

  return (
    <>
      <Dialog
        dialog={open}
        close={() => setOpen(false)}
        name={t("eci:common.head-title.home")}
      >
        <h1>{t("campaign:title")}</h1>
        <TTag message="campaign:description" />
        {!details && (
          <Button
            variant="contained"
            onClick={() => scrollTo("#eci-details") || showDetails(true)}
          >
            {t("eci:common.more_info")}
          </Button>
        )}
        {details && <Details />}
      </Dialog>
      <Button
        variant="contained"
        color="primary"
        fullWidth
        onClick={() => setOpen(true)}
        endIcon={<MoreIcon />}
      >
        {t("eci:howsupport.s1_text")}
      </Button>
    </>
  );
};

export default ReadMore;