Cards.js

import * as React from "react";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import CardMedia from "@mui/material/CardMedia";
import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
import Link from "next/link";
import { mecredURL } from "@/axiosConfig";


/**
 * Funçao que monta os cards dos recursos
 * @param {Number} id id do recurso
 * @param {string} title título do recurso
 * @param {string} author autor do recurso
 * @param {string} avatar link avatar autor
 * @param {string} image link imagem recurso
 * @param {String} updated_at data da ultima modificação do recurso
 */

export default function Cards(props) {

  /**
   * 
   * @param {String} type tipo de recurso 
   * @returns caso o recurso não tenha retorna uma thumbnail padrão
   */
  const getDefaultThumbnail = (type) => {
    let thumbnail_url;

    switch (type) {
      case "Apresentação":
        thumbnail_url = "/images/thumb-red.png";
        break;
      case "Livro digital":
        thumbnail_url = "/images/thumb-pdf.png";
        break;
      case "Texto":
        thumbnail_url = "/images/thumb-pdf.png";
        break;
      case "Vídeo":
        thumbnail_url = "/images/thumb-video.png";
        break;
      case "Áudio":
        thumbnail_url = "/images/thumb-audio.png";
        break;
      case "Imagem":
        thumbnail_url = "/images/thumb-red.png";
        break;
      case "Animação":
        thumbnail_url = "/images/thumb-red.png";
        break;
      case "Jogo":
        thumbnail_url = "/images/thumb-red.png";
      case "Software Educacional":
        thumbnail_url = "/images/thumb-red.png";
        break;
      default:
        thumbnail_url = "/images/thumb-red.png";
        break;
    }

    return thumbnail_url;
  };

  /**
   * 
   * @param {String} updated_time 
   * @returns função responsável por cálcular o tempo percorrido desde a publicação do recurso na plataforma
   */
  const timeFunction = (updated_time) => {
    let data = new Date(updated_time)
    let dataAtual = new Date();

    let time = dataAtual.getTime() - data.getTime();
    let dia = Math.floor(time / (1000 * 60 * 60 * 24));
    let ano;
    let mes;

    if ((ano = Math.floor(dia / 365)) > 0)
      return <p> há {ano} {ano === 1 ? "ano" : "anos"} </p>
    else if (((mes = Math.floor(dia / 31)) > 0))
      return <p> há {mes} {mes === 1 ? "mês" : "meses"}</p>

    if (dia === 0)
      return <p>hoje</p>
    return <p>há {dia} {dia === 1 ? "dia" : "dias"}</p>

  }

  function getRandomBg(id) {
    const colors = [
      "bg-turquoise-HC-white",
      "bg-orange-HC-white",
      "bg-darkTurquoise-HC-white",
      "bg-darkOrange-HC-white ",
      "bg-violet-HC-white",
      "bg-pink-HC-white",
      "bg-red-HC-white",
      "bg-darkGray-HC-white",
      "bg-ice-HC-white",
    ]

    return colors[id % colors.length];
  }

  return (
    <Card
      className={`active:bg-ice-HC-dark active:rounded-3xl transition ease-in-out 2xl:w-[330px] xl:w-[290px] lg:w-[270px] max-lg:w-[290px] ${props.page !== "recurso" && "items-center"}`}
      tabIndex="-1"
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "auto",
        backgroundColor: "transparent",
        boxShadow: "none",
      }}
      component={Link}
      href={`/recurso/${props["id"]}` + (props.collectionSource ? `?collectionId=${props.collectionSource}` : "")}
    >

      <CardMedia
        id="conteudo"
        tabIndex="0"
        className="hover:scale-[1.02] p-1 focus:border-turquoise-HC-white focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
        sx={{
          width: 327,
          height: 181,
        }}
        component="img"
        image={
          props["image"] === null
            ? getDefaultThumbnail(props["type"])
            : mecredURL + props["image"]
        }
        alt="imagem"
        title={props.title}
      />
      {
        props.page === "recurso" ?
          <>

            <div className="flex flex-col ml-4 max-sm:ml-0 max-sm:justify-stretch">
              <div className="line-clamp-2 text-lg font-bold text-darkGray-HC-white-underline min-h-4 max-sm:w-full"> {props["title"]}  </div>

              <div className=" flex flex-row ">
                <div className="flex flex-col ">
                  <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light" >
                    {props["author"]}
                  </div>
                  <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
                    {timeFunction(props.updated_at)}
                  </div>
                </div>
              </div>

            </div>
          </>
          :
          <>
            <div className="flex flex-row mt-4 mb-4 w-full justify-start ">
              {props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-ice-HC-dark rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
                :
                <img
                  src={mecredURL + props["avatar"]}
                  alt={props["author"]}
                  className="w-[33px] h-[33px] object-cover rounded-full"

                />

              }
              <div className="mx-2">
                <div className="line-clamp-1 text-sm font-bold text-darkGray-HC-white-underline mb- w-[100%] min-h-4"> {props["title"]}  </div>
                <div className="flex flex-row">
                  <div>
                    <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light" >
                      {props["author"]}
                    </div>
                    <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
                      {timeFunction(props.updated_at)}
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </>
      }
      {props?.homologa == "submitted" ?
        <div className="text-ice-HC-dark text-xs p-1 bg-turquoise-HC-dark rounded-full flex justify-start">Em homologação</div>
        :
        null
      }
    </Card>
  );
}