diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index a11c1c18534d11366bbb1f5ddab789c2c21daccf..c338206c9c43505e6c34a16c4d0670934e5b22dd 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -110,15 +110,12 @@ export default function Cards(props) {
return (
<Card
- className={`active:bg-main active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
+ className={`active:bg-main 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: props?.horizontal ? "row" : "column",
- // Modo de mudar o tamanho do card de acordo com a resolução da tela até separar os cards de recomendados com de recursos gerais
- width: props?.width ?? (window.innerWidth >= 1536 ? 330 : window.innerWidth >= 1280 ? 290 : window.innerWidth >= 1024 ? 270 : 290),
-
- height: props?.height ?? "auto",
+ flexDirection: "column",
+ height: "auto",
backgroundColor: "transparent",
boxShadow: "none",
}}
@@ -131,8 +128,8 @@ export default function Cards(props) {
tabIndex="0"
className="hover:scale-[1.02] p-1 focus:border-secondary focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
sx={{
- width: props?.thumbWidth ?? 327,
- height: props?.thumbHeight ?? 181,
+ width: 327,
+ height: 181,
}}
component="img"
image={
diff --git a/src/app/components/RecommendedCards.js b/src/app/components/RecommendedCards.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb846d9c0ccf83a1766e040e600c0bd6eb484eed
--- /dev/null
+++ b/src/app/components/RecommendedCards.js
@@ -0,0 +1,206 @@
+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";
+import { useMediaQuery } from "@mui/material";
+
+
+/**
+ * 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 RecommendedCards(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-secondary",
+ "bg-orange",
+ "bg-secondary-hover",
+ "bg-orange-hover",
+ "bg-violet",
+ "bg-pink",
+ "bg-red",
+ "bg-text-color",
+ "bg-text-color-click",
+ "bg-button-filters",
+ "bg-text-filter",
+ "bg-other-links",
+ "bg-blue-button",
+ ]
+
+ return colors[id % colors.length];
+ }
+
+ const isSm = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+
+
+ return (
+ <Card
+ className={`active:bg-main active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
+ tabIndex="-1"
+ sx={{
+ display: "flex",
+ flexDirection: props?.horizontal ? "row" : "column",
+ width: "100%",
+ 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-secondary focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
+ sx={{
+ width: isSm ? "100%" : "230px",
+ height: "auto",
+ }}
+ 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 text-main-text font-bold text-text-filter 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-text-color text-sm font-light" >
+ {props["author"]}
+ </div>
+ <div className="line-clamp-1 text-text-color 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-main 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 text-main-text font-bold text-text-filter mb- w-[100%] min-h-4"> {props["title"]} </div>
+ <div className="flex flex-row">
+ <div>
+ <div className="line-clamp-1 text-text-color text-sm font-light" >
+ {props["author"]}
+ </div>
+ <div className="line-clamp-1 text-text-color text-sm font-light">
+ {timeFunction(props.updated_at)}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </>
+ }
+ {props?.homologa == "submitted" ?
+ <div className="text-main text-xs p-1 bg-blue-publish rounded-full flex justify-start">Em homologação</div>
+ :
+ null
+ }
+ </Card>
+ );
+}
diff --git a/src/app/components/ShareModal.js b/src/app/components/ShareModal.js
index 8c1203c62a0fb22e0b38028eb70988bad43fbfd1..eed0b790b2d378f991aa5bbb094d9a0a3d524574 100644
--- a/src/app/components/ShareModal.js
+++ b/src/app/components/ShareModal.js
@@ -90,4 +90,4 @@ export default function ShareModal({ open, onClose, title, link }) {
</div>
</Modal>
);
-}
\ No newline at end of file
+}
diff --git a/src/app/perfil/[id]/components/ProfileCollections.js b/src/app/perfil/[id]/components/ProfileCollections.js
index ada012708a93c9f67753ec5a4f3b664f94cd54d2..ddbd94b77fd22158f42de456eb14138a4b35cac7 100644
--- a/src/app/perfil/[id]/components/ProfileCollections.js
+++ b/src/app/perfil/[id]/components/ProfileCollections.js
@@ -14,7 +14,6 @@ import EditCollectionModal from "./EditCollectionModal";
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import ShareButton from "@/app/components/ShareButton";
-
const ModalSucess = ({ open, onClose, modalOnClose }) => {
return (
<Modal open={open} onClose={onClose} className="grid place-items-center">
diff --git a/src/app/recurso/[id]/components/actionButtons.js b/src/app/recurso/[id]/components/actionButtons.js
index 0e9283689a98bec2e6ebf7c80a42cfe916f97605..c58b9b39a722a5310d63563fcde08584935ac10b 100644
--- a/src/app/recurso/[id]/components/actionButtons.js
+++ b/src/app/recurso/[id]/components/actionButtons.js
@@ -134,7 +134,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
setCollectOpen(true)
}
},
- // Botão de Compartilhar
+ //Botão de Compartilhar
{
name: "Compartilhar",
icon: <ShareOutlinedIcon />,
@@ -143,7 +143,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
},
extraProps: {},
},
- // Botão de Reportar
+ // Botão de Reportar
{
name: reported ? "Reportado" : "Reportar",
icon: reported ? <FlagIcon /> : <FlagOutlinedIcon />,
@@ -176,7 +176,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
let buttonKey = 0;
let genButton = (info) => (
- !info ? null : <Button
+ !info ? null : info.name == "Compartilhar" ? <ShareModal buttonType="incolor" /> : <Button
id="conteudo"
key={buttonKey++}
className=" first:bg-secondary group outline outline-1 outline-outlineColor group/button bg-white shadow-none flex justify-start rounded-xl p-1 m-1 normal-case text-sm min-w-min font-bold hover:bg-main-hover focus:bg-main-hover"
@@ -193,7 +193,6 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
<>
<DeleteModal open={deleteOpen} onClose={() => setDeleteOpen(false)} idLogin={userData["id"]} resourceId={learningObject.id} />
<HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setSubmitted}/>
- <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} title={"Compartilhar recurso"} link={window.location.origin + pathname}/>
<ReportModal
learningObject={learningObject}
open={reportOpen}
diff --git a/src/app/recurso/[id]/components/relatedResources.js b/src/app/recurso/[id]/components/relatedResources.js
index 86c2f55d2ff07c14978564f2b870604923e31e66..bbe2c9b23471e9f741ec1dfcef7e7555507abf9a 100644
--- a/src/app/recurso/[id]/components/relatedResources.js
+++ b/src/app/recurso/[id]/components/relatedResources.js
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
import Cards from "@/app/components/Cards";
import { useMediaQuery } from "@mui/material";
import Loading from "@/app/components/Loading";
+import RecommendedCards from "@/app/components/RecommendedCards";
const NUM_RELATED = 12;
@@ -58,7 +59,7 @@ export default function RelatedResources({ learningObject }) {
className="my-3"
key={index}
>
- <Cards
+ <RecommendedCards
horizontal={!isSm}
noAvatar={!isSm}
id={item["id"]}
@@ -68,9 +69,6 @@ export default function RelatedResources({ learningObject }) {
image={item["thumbnail"]}
type={item["object_type"]}
updated_at={item["updated_at"]}
- thumbWidth={isSm ? "100%" : "230px"}
- thumbHeight="auto"
- width="100%"
page="recurso"
/>
</div>