@proca/widget/src/components/Markdown.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 from "react";
import SkipNextIcon from "@material-ui/icons/SkipNext";
import { useTranslation } from "react-i18next";
import { Button } from "@material-ui/core";
import { useCampaignConfig } from "@hooks/useConfig";
import { Markdown } from "@components/TTag";

const MarkdownPage = props => {
  //const data = useData();
  //  const [error, setError] = useState(null);
  const config = useCampaignConfig();
  const { t } = useTranslation();

  const title = config.component.markdown?.title || "title";
  const text = config.component.markdown?.text || "text";
  const next = config.component.markdown?.next || "Next";

  return (
    <div>
      <div id="proca-html-root">
        <h3>
          <Markdown text={title} />
        </h3>
        <div>
          <Markdown text={text} />
        </div>
      </div>
      {config.component.markdown.next !== false && (
        <Button
          endIcon={<SkipNextIcon />}
          fullWidth
          variant="contained"
          onClick={props.done}
          color="primary"
        >
          {t(next)}
        </Button>
      )}
    </div>
  );
};

export default MarkdownPage;