gruenes-quartett/src/components/Main/Main.tsx

import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Main.scss";
import mainImage from "../../assets/img/cards.png";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import { useMatomo } from "@datapunt/matomo-tracker-react";

function Main() {
  const { trackPageView } = useMatomo();
  const [{ title, content }, setContent] = useState({
    title: "",
    content: "",
  });

  useEffect(() => {
    interface HomeProps {
      title: string;
      content: string;
    }
    const getContent = async (): Promise<HomeProps> => {
      const response = await fetch(`${url}/home`);
      const data = await response.json();
      setContent(data);
      return data;
    };

    getContent().then();
    trackPageView({ documentTitle: "Beteiligte" });
  }, [trackPageView]);

  return (
    <div className="Main">
      <h1 className="main-title">{title}</h1>
      <div className="main-content">
        <ReactMarkdown>{content}</ReactMarkdown>
      </div>
      <div className="main-image">
        <img src={mainImage} alt="Quartett Karten" />
      </div>
      <Link to="/kategorien">
        <button type="button" className="main-button">
          Zu den Kategoriebeschreibungen
        </button>
      </Link>
    </div>
  );
}

export default Main;