diff --git a/src/app/colecao/[id]/page.js b/src/app/colecao/[id]/page.js
index 8ea7bc7e931b634ac6e080422e5be50bba3a3819..e20042f1e416d3b7119fa35bd75ed6bd67394b56 100644
--- a/src/app/colecao/[id]/page.js
+++ b/src/app/colecao/[id]/page.js
@@ -12,14 +12,13 @@ import Tags from "@/app/components/tags";
import CollectionItems from "./components/collectionItems";
import PublisherInfoCollection from "./components/publisherInfoCollection";
import DownloadButton from "@/app/components/DownloadButton";
-import ShareModal from "@/app/components/ShareModal";
-import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
+import ShareButton from "@/app/components/ShareButton";
export default function Colecao({ params }) {
const [collection, setCollection] = useState(undefined);
const [needLoginOpen, setNeedLoginOpen] = useState(false);
- const [error, setError] = useState(false)
- const [shareOpen, setShareOpen] = useState(false);
+ const [error, setError] = useState(false);
+ const [isSmallScreen, setIsSmallScreen] = useState(false);
const token = getStoredValue("access_token");
const client = getStoredValue("client");
@@ -27,51 +26,64 @@ export default function Colecao({ params }) {
useEffect(() => {
const fetchData = async () => {
- try {
- let headers = {};
+ try {
+ let headers = {};
- if (isLoggedIn()) {
- headers = {
- "access-token": token,
- "token-type": "Bearer",
- client: client,
- uid: uid,
- Expires: 0,
- };
- }
+ if (isLoggedIn()) {
+ headers = {
+ "access-token": token,
+ "token-type": "Bearer",
+ client: client,
+ uid: uid,
+ Expires: 0,
+ };
+ }
- const response = await mecredApi.get(`collections/${params.id}`, {
- headers: headers,
- });
+ const response = await mecredApi.get(`collections/${params.id}`, {
+ headers: headers,
+ });
- setCollection(response.data);
- } catch (error) {
- setError(true);
- }
+ setCollection(response.data);
+ } catch (error) {
+ setError(true);
+ }
};
fetchData();
-}, [params.id, client, token, uid]);
+ }, [params.id, client, token, uid]);
+
+ useEffect(() => {
+ // Função para checar o tamanho da tela
+ const checkScreenSize = () => {
+ setIsSmallScreen(window.innerWidth < 1280);
+ };
+
+ checkScreenSize(); // Checa no primeiro render
+ window.addEventListener("resize", checkScreenSize); // Adiciona o listener
+
+ return () => window.removeEventListener("resize", checkScreenSize); // Remove ao desmontar
+ }, []);
return (
<>
- <Overlay>
- {!collection ? (error ?
- <ErrorComponent name="Recurso" /> :
-
- <Loading scroll />
+ <Overlay type={isSmallScreen ? "twoColumns" : undefined}>
+ {!collection ? (
+ error ? (
+ <ErrorComponent name="Recurso" />
+ ) : (
+ <Loading scroll />
+ )
) : (
<>
- <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} title={"Compartilhar coleção"} link={`${location.protocol}//${location.host}/colecao/${collection.id}`}/>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <div className="flex mb-5 overflow-y-auto scrollbar-none flex-col lg:flex-row">
- <div className="flex flex-col bg-main p-3 w-full flex-shrink-0">
+ <div className="mb-5 overflow-y-auto scrollbar-none">
+ <div className="bg-main p-3 w-full">
<div className=" flex justify-center">
{/* Pré-visualização */}
<CollectionPreview collection={collection} />
</div>
- <div className="flex flex-row justify-between">
- <div className="flex flex-col">
+ <div>
+ <div>
<div className="text-main-text mt-5 text-2xl font-bold">
{/* Título */}
<h1>{collection.name}</h1>
@@ -84,16 +96,7 @@ export default function Colecao({ params }) {
</div>
<div className="flex flex-row gap-3 pb-4 pt-4">
<DownloadButton id={collection.id} objects={collection.collection_items} />
-
- {/* Botão de Compartilhar */}
- <button
- className="p-2 max-md:my-3 text-sm rounded-xl bg-main outline outline-2 outline-outlineColor hover:bg-main-hover text-text-filter font-bold normal-case flex justify-center items-center gap-2"
- onClick={() => setShareOpen(true)}
- aria-label="Compartilhar" // Texto para leitores de tela
- >
- <ShareOutlinedIcon fontSize="small" /> {/* Ícone de lata de lixo */}
- <span className="hidden md:inline">Compartilhar</span> {/* Texto visível apenas em telas maiores */}
- </button>
+ <ShareButton id={collection.id} type={"colecao"} />
</div>
<div>
{/* Publicador */}
@@ -101,10 +104,10 @@ export default function Colecao({ params }) {
</div>
</div>
</div>
- <div className="px-[25px] bg-main overflow-y-auto">
- <div> {/* recommendations */} </div>
- <CollectionItems collection={collection} />
- </div>
+ <div className="px-[25px] bg-main">
+ <div> {/* recommendations */} </div>
+ <CollectionItems collection={collection} />
+ </div>
</>
)}
</Overlay>
diff --git a/src/app/components/InfiniteScrollCards.js b/src/app/components/InfiniteScrollCards.js
index addfaad3ef9eef11598f832ebc7e25610d40132e..ab2dc1e4ca6dd1d1884a893fb321238e964987fb 100644
--- a/src/app/components/InfiniteScrollCards.js
+++ b/src/app/components/InfiniteScrollCards.js
@@ -5,8 +5,7 @@ import Link from "next/link";
import mecredApi from "@/axiosConfig";
import DownloadButton from "./DownloadButton";
import UsersPageCard from "./UsersPageCard";
-import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
-import ShareModal from "@/app/components/ShareModal";
+import ShareButton from "./ShareButton";
/**
*
@@ -20,7 +19,6 @@ import ShareModal from "@/app/components/ShareModal";
export default function InfiniteScrollCards({ data, searchClass, setNewSize, newSize }) {
const [cardsPerRow, setCardsPerRow] = useState(0);
const [mecCollection, setMecCollection] = useState([]);
- const [shareOpen, setShareOpen] = useState(false);
/**
*pega o tamanho da div de id "contentSize"
*/
@@ -81,44 +79,46 @@ export default function InfiniteScrollCards({ data, searchClass, setNewSize, new
case "Collection":
return (
<div className="justify-center mt-5">
- {data?.map((item, index) => (
- <div key={index} className="bg-white outline outline-1 outline-outlineColor mb-10 pt-6 px-4 rounded-2xl relative">
-
- {/* Cabeçalho com título, autor e botões */}
- <div className="flex justify-between items-start">
-
- {/* Título e autor */}
- <div className="flex flex-col">
- <p className="text-2xl font-bold mb-1 text-text-color hover:underline">
- <Link href={`/colecao/${item.id}`}>{item.name}</Link>
- </p>
- <p className="ml-1 text-text-color">
- por <Link className="hover:underline" href={`/perfil/${item.owner.id}`}>{item.owner.name}</Link>
- </p>
- </div>
-
- {/* Botões */}
- <div className="flex flex-row gap-2 justify-end">
- <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} title={"Compartilhar coleção"} link={`${location.protocol}//${location.host}/colecao/${item.id}`} />
- <DownloadButton id={item.id} objects={item.collection_items} />
- {/* Botão de Compartilhar */}
- <button
- className="p-2 text-sm rounded-xl max-md:my-3 bg-main hover:bg-main-hover outline outline-2 outline-outlineColor text-text-filter font-bold normal-case flex justify-center items-center gap-2"
- onClick={() => setShareOpen(true)}
- aria-label="Compartilhar"
- >
- <ShareOutlinedIcon fontSize="small" />
- <span className="hidden md:inline">Compartilhar</span>
- </button>
- </div>
- </div>
-
- {/* Cartões da coleção abaixo do cabeçalho */}
- <div className="mt-4">
- <GroupCardsCollections cardsPerRow={cardsPerRow} data={item.collection_items} collectionId={item.id} />
- </div>
+ {data?.map((item) => (
+ <div
+ key={item.id}
+ className="bg-white outline outline-1 outline-outlineColor mb-10 pt-6 px-4 rounded-2xl relative"
+ >
+ {/* Cabeçalho com título, autor e botões */}
+ <div className="flex justify-between items-start">
+ {/* Título e autor */}
+ <div className="flex flex-col">
+ <p className="text-2xl font-bold mb-1 text-text-color hover:underline">
+ <Link href={`/colecao/${item.id}`}>{item.name}</Link>
+ </p>
+ <p className="ml-1 text-text-color">
+ por{" "}
+ <Link
+ className="hover:underline"
+ href={`/perfil/${item.owner.id}`}
+ >
+ {item.owner.name}
+ </Link>
+ </p>
</div>
- ))}
+
+ {/* Botões */}
+ <div className="flex flex-row gap-2 justify-end">
+ <DownloadButton id={item.id} objects={item.collection_items} />
+ <ShareButton type="colecao" id={item.id} />
+ </div>
+ </div>
+
+ {/* Cartões da coleção abaixo do cabeçalho */}
+ <div className="mt-4">
+ <GroupCardsCollections
+ cardsPerRow={cardsPerRow}
+ data={item.collection_items}
+ collectionId={item.id}
+ />
+ </div>
+ </div>
+ ))}
</div>
);
diff --git a/src/app/components/NavigationBar.js b/src/app/components/NavigationBar.js
index bbd7b7c621c762ee79f071c2b10a78aa060342b7..552ba4fdf4f25ed383f57ea510a7d9e93a35f84c 100644
--- a/src/app/components/NavigationBar.js
+++ b/src/app/components/NavigationBar.js
@@ -14,9 +14,6 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
import {
getStoredValue,
} from "../handlers/localStorageHandler";
-import { MobileSearch } from './Header';
-
-
export default function NavigationBar({ mobileSearch}) {
@@ -63,40 +60,45 @@ export default function NavigationBar({ mobileSearch}) {
<>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <nav className="bg-bg-comments h-nav-bar text-text-color p-4 fixed bottom-0 left-0 w-full z-10">
- <ul className="flex justify-between overflow-x-auto no-scrollbar animate-scrollHint">
+ <nav className="bg-fundo bg-repeat h-50 outline outline-1 outline-outlineColor text-text-color fixed bottom-0 left-0 w-full z-10">
+ <ul className="flex justify-between overflow-x-auto no-scrollbar animate-scrollHint">
{navItems.map((item, index) => {
- const isPublishRoute = item.href === "/publicar";
- const isPerfilRoute = item.href === "/perfil";
- const isSearchButton = item.label === "Pesquisar";
-
-
- return (
- <li key={index} className="flex w-24 flex-col items-center justify-center px-4 pt-2 ">
-
- <a href={isPublishRoute ? (isLoggedIn() ? "/publicar" : "")
- : isPerfilRoute ? (isLoggedIn() ? `/perfil/${id}` : "")
- : item.href}
-
- onClick={isPublishRoute || isPerfilRoute ? (e) => { return (handleOpenLoggin(e)) } :
- isSearchButton ? (e) => { return (handleToggleMobileSearch(e)) }
- : undefined}
- className="text-center ">
- <item.icon className={`cursor-pointer text-4xl ${(page === item.href.split('page=')[1]) || (pathname === item.href) || (mobileSearch.searchIsClicked && item.label === "Pesquisar")
- ? "text-gray-color "
- : "text-color"
- }`} />
- <span className={`cursor-pointer text-sm ${(page === item.href.split('page=')[1]) || (pathname === item.href) || (mobileSearch.searchIsClicked && item.label === "Pesquisar")
- ? "text-gray-color "
- : "text-color"
- }`}>{item.label}</span>
- </a>
- </li>
- )
+ const isPublishRoute = item.href === "/publicar";
+ const isPerfilRoute = item.href === "/perfil";
+ const isSearchButton = item.label === "Pesquisar";
+
+ const isActive =
+ (page === item.href.split("page=")[1]) ||
+ (pathname === item.href) ||
+ (mobileSearch.searchIsClicked && item.label === "Pesquisar");
+
+ return (
+ <li key={index} className="flex w-20 flex-col items-center justify-center p-3">
+ <a
+ href={
+ isPublishRoute ? (isLoggedIn() ? "/publicar" : "") :
+ isPerfilRoute ? (isLoggedIn() ? `/perfil/${id}` : "") :
+ item.href
+ }
+ onClick={
+ isPublishRoute || isPerfilRoute ? (e) => handleOpenLoggin(e) :
+ isSearchButton ? (e) => handleToggleMobileSearch(e) :
+ undefined
+ }
+ className={`text-center rounded-md transition-all ${
+ isActive ? "outline outline-1 outline-secondary" : ""
+ }`}
+ >
+ <item.icon className={`cursor-pointer text-3xl ${isActive ? "text-color" : "text-color"}`} />
+ <span className={`cursor-pointer text-xs ${isActive ? "text-color" : "text-color"}`}>
+ {item.label}
+ </span>
+ </a>
+ </li>
+ );
})}
</ul>
</nav>
</>
-
)
}
\ No newline at end of file
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index 9dd16daf06f814d78514ba32fc059e4d6a30389c..ecb1d92b1ad84e71367cd8dbd78d296025a10d38 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -92,7 +92,6 @@ export default function Overlay({
</div>
{children}
</div>
-
}
</main>
</ThemeProvider>
diff --git a/src/app/components/ShareButton.js b/src/app/components/ShareButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..f539d10a7da2b6eca9400c984fc8a542505b8e1e
--- /dev/null
+++ b/src/app/components/ShareButton.js
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
+import ShareModal from './ShareModal';
+import { usePathname } from 'next/navigation';
+
+/**
+ * Botão de Compartilhamento que abre o modal e compartilha o link corretamente
+ * @param {Object} props
+ * @param {String} props.type Tipo do item a ser compartilhado (ex: "colecao", "recurso", "perfil")
+ * @param {Number} props.id ID do item a ser compartilhado
+ */
+export default function ShareButton({ type, id }) {
+ const [shareOpen, setShareOpen] = useState(false);
+
+ const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
+ const link = `${baseUrl}/${type}/${id}`; // Gera o link dinâmico baseado no tipo e ID
+
+ return (
+ <>
+ <button
+ className="p-2 text-sm rounded-xl max-md:my-3 bg-main hover:bg-main-hover outline outline-2 outline-outlineColor text-text-filter font-bold normal-case flex justify-center items-center gap-2"
+ onClick={() => setShareOpen(true)}
+ aria-label="Compartilhar"
+ >
+ <ShareOutlinedIcon fontSize="small" />
+ <span className="hidden md:inline">Compartilhar</span>
+ </button>
+ <ShareModal
+ open={shareOpen}
+ onClose={() => setShareOpen(false)}
+ title={`Compartilhando ${type}`}
+ link={link}
+ />
+ </>
+ );
+}
diff --git a/src/app/components/ShareModal.js b/src/app/components/ShareModal.js
index a90c09c4824fa6482d3e256a4110c87e64f7fee2..8c1203c62a0fb22e0b38028eb70988bad43fbfd1 100644
--- a/src/app/components/ShareModal.js
+++ b/src/app/components/ShareModal.js
@@ -1,32 +1,27 @@
-import {useState, useEffect} from 'react';
+import { useState, useEffect } from 'react';
import { Button, Modal } from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import { usePathname } from "next/navigation";
import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
/**
* @param {Object} props
* @param {Boolean} props.open
* @param {Function} props.onClose
+ * @param {String} props.title Título do compartilhamento
+ * @param {String} props.link URL a ser compartilhada
*/
-export default function ShareModal({ open, onClose, title, link}) {
+export default function ShareModal({ open, onClose, title, link }) {
const [clicked, setClicked] = useState(false);
- const pathname = usePathname();
- let url = "";
-
- if (typeof window !== "undefined" && window.location)
- url = window.location.origin + pathname;
-
- useEffect (() => {
+
+ useEffect(() => {
setClicked(false);
- }, [])
-
+ }, [open]);
- function shareLink(url) {
+ function shareLink() {
if (navigator.share) {
navigator.share({
title: title,
- url: url,
+ url: link,
})
.then(() => console.log("Compartilhamento realizado com sucesso"))
.catch((error) => console.error("Erro ao compartilhar:", error));
@@ -35,7 +30,6 @@ export default function ShareModal({ open, onClose, title, link}) {
}
}
-
return (
<Modal
open={open}
@@ -44,24 +38,21 @@ export default function ShareModal({ open, onClose, title, link}) {
slotProps={{
backdrop: {
sx: {
- backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
},
},
}}
>
<div>
<div className="flex flex-col bg-main p-6 rounded-lg items-center">
- <div className="text-xl font-bold text-main-text">Compartilhar</div>
+ <div className="text-xl font-bold text-main-text">{title}</div>
<div className="p-3 mt-2 flex flex-col sm:flex-row">
- {/* copy link button */}
<div>
<Button
disableElevation
variant="outlined"
className="border-main text-main-text border text-lg normal-case flex gap-2 "
- sx={{
- justifyContent: "start",
- }}
+ sx={{ justifyContent: "start" }}
onClick={() => {
navigator.clipboard.writeText(link);
setClicked(true);
@@ -69,30 +60,28 @@ export default function ShareModal({ open, onClose, title, link}) {
alt="Copiar link para o clipboard"
>
<ContentCopyIcon className="p-[1px]" />
- { clicked ?
- <span>Copiado!</span>
- :
- <span>Copiar link!</span>
- }
+ {clicked ? <span>Copiado!</span> : <span>Copiar link!</span>}
</Button>
</div>
- {navigator.share ? <div className="mt-2 sm:mt-0 sm:ml-2">
- <Button
- disableElevation
- variant="contained"
- className="bg-main text-main-text text-lg normal-case flex gap-2"
- onClick={() => shareLink(url)}
- alt="Compartilhar link"
- >
- <SendOutlinedIcon className="p-[1px]" />
- <span>Enviar</span>
- </Button>
- </div> : ""}
+ {navigator.share ? (
+ <div className="mt-2 sm:mt-0 sm:ml-2">
+ <Button
+ disableElevation
+ variant="contained"
+ className="bg-main text-main-text text-lg normal-case flex gap-2"
+ onClick={shareLink}
+ alt="Compartilhar link"
+ >
+ <SendOutlinedIcon className="p-[1px]" />
+ <span>Enviar</span>
+ </Button>
+ </div>
+ ) : ""}
</div>
<div className="flex justify-center">
<button
className="text-sm text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
- onClick={() => { onClose(); setClicked(false) }}
+ onClick={() => { onClose(); setClicked(false); }}
>
Fechar
</button>
diff --git a/src/app/perfil/[id]/components/GroupButton.js b/src/app/perfil/[id]/components/GroupButton.js
index b542f73285006f97a8440b30df8226beaadbcc60..125f6ab7239845f718e5c6d20ede6707f33475a4 100644
--- a/src/app/perfil/[id]/components/GroupButton.js
+++ b/src/app/perfil/[id]/components/GroupButton.js
@@ -8,17 +8,11 @@ import { useState, useEffect } from 'react';
import { getStoredValue } from '@/app/handlers/localStorageHandler';
import { useLoginBarrier } from '@/app/handlers/loginHandler';
import mecredApi from '@/axiosConfig';
-// import ShareModal from '@/app/components/ShareModal';
import ReportProfileModal from './ReportProfileModal';
import { useRouter } from 'next/navigation'
import { Modal } from '@mui/material';
import { usePathname } from "next/navigation";
-import ShareIcon from "@mui/icons-material/Share";
-import { Button } from "@mui/material";
-
-
-
-
+import ShareButton from '@/app/components/ShareButton';
/**
* @returns Grupo de botões card principal do perfil
@@ -30,7 +24,6 @@ export default function GroupButton({ profileData, idLogin }) {
const loginBarrier = useLoginBarrier();
const [follow, setFollow] = useState(profileData["followed"])
const [complained, setComplained] = useState(profileData["complained"])
- // const [shareOpen, setShareOpen] = useState(false);
const [reportOpen, setReportOpen] = useState(false);
const [reported, setReported] = useState(false);
const token = getStoredValue("access_token")
@@ -38,7 +31,6 @@ export default function GroupButton({ profileData, idLogin }) {
const uid = getStoredValue("uid")
const router = useRouter()
- const [clicked, setClicked] = useState(false);
const pathname = usePathname();
let url = "";
@@ -138,35 +130,7 @@ export default function GroupButton({ profileData, idLogin }) {
{follow ? "Seguindo o perfil" : "Seguir o perfil"}
</button>
}
- <div className=''>
- {navigator.share ?
- <Button
- className="border text-[16px] outline outline-1 pr-4 outline-outlineColor text-text-filter border-main rounded-[10px] normal-case h-10 font-semibold w-56- [ ] bg-main hover:bg-main-hover "
- onClick={() => shareLink(url)}
- disableElevation
- variant="contained"
- alt="Compartilhar nativo do celular"
- >
- <ShareIcon className="p-[1px]" />
- <span>Compartilhar perfil</span>
- </Button> :
- <button
- className="border text-[16px] outline outline-1 pr-2 outline-outlineColor text-text-filter border-main rounded-[10px] normal-case h-10 font-semibold w-56- [ ] hover:bg-main-hover "
- onClick={() => {
- navigator.clipboard.writeText(url);
- setClicked(true);
- }}
- alt="Compartilhar perfil"
- >
- <ContentCopyIcon fontSize='small' className='m-1' />
- {clicked ?
- <span>Link do perfil copiado!</span>
- :
- <span>Copiar link do perfil</span>
- }
-
- </button>}
- </div>
+ <ShareButton id={profileData.id} type={'perfil'} />
</div>
<div >
{idLogin !== profileData["id"] &&
@@ -187,7 +151,6 @@ export default function GroupButton({ profileData, idLogin }) {
</div>
</div>
{/* Share modal para quando existir mais de uma forma de compartilhar o perfil */}
- {/* <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} /> */}
<ReportProfileModal profile={profileData} open={reportOpen} idLogin={idLogin} onClose={() => setReportOpen(false)} setComplained={setComplained} />
<ReportedModal open={reported} onClose={() => setReported(false)} />
</>
diff --git a/src/app/perfil/[id]/components/ProfileCollections.js b/src/app/perfil/[id]/components/ProfileCollections.js
index b50cb38a3a3ce5e80da6014ab2f90853fb08d039..ada012708a93c9f67753ec5a4f3b664f94cd54d2 100644
--- a/src/app/perfil/[id]/components/ProfileCollections.js
+++ b/src/app/perfil/[id]/components/ProfileCollections.js
@@ -12,8 +12,7 @@ import { Modal } from "@mui/material";
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import EditCollectionModal from "./EditCollectionModal";
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
-import ShareModal from "@/app/components/ShareModal";
+import ShareButton from "@/app/components/ShareButton";
const ModalSucess = ({ open, onClose, modalOnClose }) => {
@@ -55,7 +54,6 @@ export default function ProfileCollections({ id, idLogin }) {
const uid = getStoredValue("uid");
const [got, setGot] = useState(false)
const [cardsPerRow, setCardsPerRow] = useState(0);
- const [shareOpen, setShareOpen] = useState(false);
const getWidth = async () => {
return document.getElementById('content')?.scrollWidth;
@@ -216,17 +214,8 @@ export default function ProfileCollections({ id, idLogin }) {
<div className="flex flex-row gap-2 justify-end">
<EditCollectionModal open={editOpen} onClose={() => setEditOpen(false)} collectionId={item.id} collectionData={item} />
<DeleteCollectionModal open={deleteOpen} onClose={() => setDeleteOpen(false)} />
- <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} title={"Compartilhar coleção"} link={`${location.protocol}//${location.host}/colecao/${item.id}`}/>
<DownloadButton id={item.id} objects={item.collection_items} />
- {/* Botão de Compartilhar */}
- <button
- className="p-2 max-md:my-3 text-sm rounded-xl bg-main hover:bg-main-hover outline outline-2 outline-outlineColor text-text-filter font-bold normal-case flex justify-center items-center gap-2"
- onClick={() => setShareOpen(true)}
- aria-label="Compartilhar" // Texto para leitores de tela
- >
- <ShareOutlinedIcon fontSize="small" /> {/* Ícone de lata de lixo */}
- <span className="hidden md:inline">Compartilhar</span> {/* Texto visível apenas em telas maiores */}
- </button>
+ <ShareButton id={item.id} type={'colecao'} />
{id === idLogin && (
<div className="flex gap-4"> {/* Adiciona um espaçamento entre os botões */}
{/* Botão de Editar */}
diff --git a/src/app/recurso/[id]/page.js b/src/app/recurso/[id]/page.js
index a339b474e225bd251845d08906a9b6a60e6280a7..66a17c897c7faafc445747012c3f59b4401c5399 100644
--- a/src/app/recurso/[id]/page.js
+++ b/src/app/recurso/[id]/page.js
@@ -22,14 +22,15 @@ import CollectionInfo from "./components/collectionInfo";
export default function Recurso({ params }) {
const [learningObject, setLearningObject] = useState(undefined);
const [needLoginOpen, setNeedLoginOpen] = useState(false);
- const [error, setError] = useState(false)
- const [state, setState] = useState()
- const [submitOpen, setSubmitOpen] = useState(false)
- const [submitComplaintOpen, setSubmitComplaintOpen] = useState(false)
- const [complained, setComplained] = useState()
+ const [error, setError] = useState(false);
+ const [state, setState] = useState();
+ const [submitOpen, setSubmitOpen] = useState(false);
+ const [submitComplaintOpen, setSubmitComplaintOpen] = useState(false);
+ const [complained, setComplained] = useState();
+ const [isSmallScreen, setIsSmallScreen] = useState(false);
const searchParams = useSearchParams();
-
- const collectionId = searchParams.get('collectionId');
+
+ const collectionId = searchParams.get("collectionId");
const token = getStoredValue("access_token");
const client = getStoredValue("client");
@@ -56,7 +57,7 @@ export default function Recurso({ params }) {
setLearningObject(response.data);
setState(response.data.state === "submitted");
- setComplained(learningObject.state === "suspended");
+ setComplained(response.data.state === "suspended");
} catch (error) {
setError(true);
}
@@ -67,88 +68,77 @@ export default function Recurso({ params }) {
useEffect(() => {
setComplained(learningObject?.state === "suspended");
- }, [learningObject]);
+ }, [learningObject]);
useEffect(() => {
- const container = document.querySelector(".scroll-container");
- if (container) {
- container.scrollTop = 0; // Rola para o topo
- }
- });
+ const checkScreenSize = () => {
+ setIsSmallScreen(window.innerWidth < 1280);
+ };
+
+ checkScreenSize();
+ window.addEventListener("resize", checkScreenSize);
+
+ return () => window.removeEventListener("resize", checkScreenSize);
+ }, []);
return (
<>
- <Overlay>
- {!learningObject ? (error ?
- <ErrorComponent name="Recurso" /> :
-
- <Loading scroll />
+ <Overlay type={isSmallScreen ? "twoColumns" : undefined}>
+ {!learningObject ? (
+ error ? (
+ <ErrorComponent name="Recurso" />
+ ) : (
+ <Loading scroll />
+ )
) : (
<>
<HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setState} />
<ComplaintModal open={submitComplaintOpen} onClose={() => setSubmitComplaintOpen(false)} name={learningObject.name} id={learningObject.id} setSubmitted={setComplained} />
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <div className="flex flex-col bg-main p-3 flex-shrink-0 min-height-0 overflow-y-auto scrollbar-none scroll-container">
- <div className=" flex justify-center">
- {/* Pré-visualização */}
- <ResourcePreview learningObject={learningObject} />
- </div>
- <div className="flex flex-row justify-between">
- <div className="flex flex-col">
-
+ <div className="flex flex-col bg-main p-3 flex-shrink-0 min-height-0 overflow-y-auto scrollbar-none scroll-container">
+ <div className=" flex justify-center">
+ <ResourcePreview learningObject={learningObject} />
+ </div>
+ <div className="flex flex-row justify-between">
+ <div className="flex flex-col">
<div className="text-main-text mt-5 text-2xl font-bold">
- {/* Verifica se há um link */}
- {learningObject.link ? (
- <a
- href={learningObject.link}
- target="_blank"
- rel="noopener noreferrer"
- className="text-main-text hover:underline"
- >
- {learningObject.name}
- </a>
- ) : (
- <h1>{learningObject.name}</h1>
- )}
+ {learningObject.link ? (
+ <a
+ href={learningObject.link}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="text-main-text hover:underline"
+ >
+ {learningObject.name}
+ </a>
+ ) : (
+ <h1>{learningObject.name}</h1>
+ )}
</div>
- <div className="text-main-text text-[12px] font-bold">
- {/* tags */}
- <Tags tags={learningObject.tags} />
- </div>
+ <div className="text-main-text text-[12px] font-bold">
+ <Tags tags={learningObject.tags} />
</div>
- {state &&
- <div className=" flex items-center mt-5">
- <button onClick={() => setSubmitOpen(true)} className="bg-orange p-2 text-white font-semi-bold rounded-lg hover:bg-orange-hover">Avaliar Submissão</button>
- </div>
- }
- {complained &&
- <div className=" flex items-center mt-5">
- <button onClick={() => setSubmitComplaintOpen(true)} className="bg-orange p-2 text-white font-semi-bold rounded-lg hover:bg-orange-hover">Avaliar Denúncia</button>
- </div>
- }
</div>
- <div className="">
- {/* Modal de entrar */}
- <ActionButtons learningObject={learningObject} setNeedLoginOpen={setNeedLoginOpen} state={state} />
- </div>
- <div className="">
- {/* Publicador */}
- <PublisherInfo publisher={learningObject?.publisher} />
- </div>
- <div className="">
- {/* Informações */}
- <ResourceInfo learningObject={learningObject} />
- </div>
- <div className="">
- {/* comments */}
- <Comments learningObjectId={params.id} />
- </div>
- </div>
- <div className="px-[25px] p-3 min-h-0 overflow-y-auto">
- <div className=""> {/* recommendations */} </div>
- {(collectionId !== null && collectionId !== undefined) ? <CollectionInfo resourceId={params.id} collectionId={collectionId} /> : <></>}
- <RelatedResources learningObject={learningObject} />
+ {state && (
+ <div className=" flex items-center mt-5">
+ <button onClick={() => setSubmitOpen(true)} className="bg-orange p-2 text-white font-semi-bold rounded-lg hover:bg-orange-hover">Avaliar Submissão</button>
+ </div>
+ )}
+ {complained && (
+ <div className=" flex items-center mt-5">
+ <button onClick={() => setSubmitComplaintOpen(true)} className="bg-orange p-2 text-white font-semi-bold rounded-lg hover:bg-orange-hover">Avaliar Denúncia</button>
+ </div>
+ )}
</div>
+ <ActionButtons learningObject={learningObject} setNeedLoginOpen={setNeedLoginOpen} state={state} />
+ <PublisherInfo publisher={learningObject?.publisher} />
+ <ResourceInfo learningObject={learningObject} />
+ <Comments learningObjectId={params.id} />
+ </div>
+ <div className="px-[25px] p-3 min-h-0 overflow-y-auto">
+ {(collectionId !== null && collectionId !== undefined) ? <CollectionInfo resourceId={params.id} collectionId={collectionId} /> : <></>}
+ <RelatedResources learningObject={learningObject} />
+ </div>
</>
)}
</Overlay>