Highlights.js

import Grid from "@mui/material/Unstable_Grid2";
import { useEffect, useState } from "react";
import mecredApi from "@/axiosConfig";

export default function Hightlights() {
  const [statistics, setStatistics] = useState({});

  useEffect(() => {
    mecredApi
      .get("/statistics")
      .then(({ data }) => setStatistics(data))
      .catch((error) => console.log(error));
  }, []);

  return (
    <div className="flex flex-col text-center">
      <h1 className="text-3xl font-bold text-[#00bacc] mb-3">
        Plataforma MEC de Recursos Educacionais Digitais
      </h1>
      <h1 className="text-lg text-gray-400 mb-5">
        Encontre e compartilhe vídeos, animações e muitos outros recursos.
      </h1>
      <h1 className="text-base">
        {statistics.count} recursos disponíveis | {statistics.month_downloads}{" "}
        recursos baixados este mês
      </h1>
      {/*<div className="flex flex-wrap justify-center max-w-[70%] items-center">
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
            <div className="m-1 min-w-24 h-24 bg-black  items-center"></div>
  </div>*/}
    </div>
  );
}