Issue #235: ADD Co-authors of a resource

src/app/components/SideBar.js

@@ -161,7 +161,7 @@ export default function SideBar({ setFilterState, filterState }) {
                 key={index}
                 alt={item.title}
                 title={item.title}
-                className={`aspect-square cursor-pointer hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline focus:bg-lightGray-HC-white text-center rounded-lg pt-2 w-[60%] h-[70px]
+                className={`aspect-square cursor-pointer hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline focus:bg-lightGray-HC-white text-center rounded-lg items-center justify-center pt-2 w-[53%] h-[53%]
                   ${(page === item.href) || (pathname.startsWith(item.href)) ? "bg-lightGray-HC-white text-darkGray-HC-dark-underline font-bold" : ""}
                 `}
               >

src/app/publicar/components/AuthorSelection.js

@@ -54,6 +54,11 @@ export default function AuthorSelection({ selectedValue, handleRadioChange, auth
             }
           />
         </RadioGroup>
+        {selectedValue !== "a" && (
+          <div className="text-sm text-darkGray-HC-white mb-1">
+            Nomes dos autores devem ser separados por vírgula.
+          </div>
+        )}
         <CustomTextField
           fullWidth
           multiline
@@ -62,9 +67,16 @@ export default function AuthorSelection({ selectedValue, handleRadioChange, auth
           value={author}
           onChange={handleAuthorChange}
           helperText={<div className=" w-full justify-end flex">
+             <span className="text-red-HC-white justify-start">
+              {selectedValue === "b" && !author.includes(",") && "Separe os nomes com vírgula."}
+              {(selectedValue === "b" || selectedValue === "c") && author.trim().endsWith(",") && "Não termine com vírgula."}
+            </span>
+            <span className="ml-auto">
               {author?.length}/255
+            </span>
             </div>}
-          error={author?.length > 255}
+          error={(selectedValue === "b" && (!author.includes(",") || author.trim().endsWith(","))) || 
+                author?.length > 255 || selectedValue === "c" && author.trim().endsWith(",")}
           className="mb-5"
         />
       </div>

src/app/recurso/[id]/components/authors.js

+export default function Authors({ data }) {
+    return (
+      <div className="flex flex-col p-1 text-darkGray-HC-white">
+        <div className="font-bold text-lg">Autores deste Recurso</div>
+        <div className="text-darkGray-HC-white p-3">{data}</div>
+      </div>
+    );
+  }
\ No newline at end of file

src/app/recurso/[id]/components/createComments.js

@@ -67,11 +67,11 @@ export default function CreateComments({ user, logged, handleSubmitComment, newC
             value={newComment}
           />
           <div className="flex justify-end gap-2 mt-2">
-            <button className="w-24 h-8 border-black rounded-lg text-darkGray-HC-white-underline text-sm hover:text-white-HC-dark-underline hover:bg-ice-HC-white outline outline-1 outline-ice-HC-white" onClick={() => setNewComment("")}> cancelar </button>
+            <button className="w-24 h-8 border-black rounded-lg text-darkGray-HC-white-underline text-sm hover:text-darkGray-HC-dark-underline hover:bg-lightGray-HC-white outline outline-1 outline-white" onClick={() => setNewComment("")}> Cancelar </button>
             <button className="bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white w-24 h-8 rounded-lg text-white-HC-dark-underline text-sm hover:bg-turquoise-hover outline outline-1 outline-ice-HC-white" onClick={() => {
               if (!logged) setNeedLoginOpen(true)
               handleSubmitComment()
-            }}> comentar </button>
+            }}> Comentar </button>
           </div>
         </div>
         <div className="flex flex-row justify-center items-baseline gap-3 sm:hidden">

src/app/recurso/[id]/components/editComments.js

@@ -61,7 +61,7 @@ return (
                         value={editMessage}
                     />
                     <div className="flex justify-end gap-2 mt-2">
-                        <button className="w-24 h-8 rounded-lg text-darkGray-HC-white text-sm hover:bg-ice-HC-dark" onClick={() => { setEdit(false); setEditMessage(comment?.description) }}> cancelar </button>
+                        <button className="w-24 h-8 rounded-lg text-darkGray-HC-white text-sm hover:bg-lightGray-HC-dark" onClick={() => { setEdit(false); setEditMessage(comment?.description) }}> cancelar </button>
                         <button className="bg-turquoise-HC-white w-24 h-8 rounded-lg text-white-HC-dark-underline hover:text-white text-sm hover:bg-darkTurquoise-HC-dark  outline outline-1 outline-ice-HC-white" onClick={handleSubmitEdit}> editar </button>
                     </div>
                 </div>

src/app/recurso/[id]/components/metrics.js

@@ -25,6 +25,10 @@ const genMetric = ({ icon, name, data }) => {
 }
 
 export default function Specifications({ learningObject }) {
+  console.log(learningObject)
+  console.log(learningObject.author)
+  console.log(learningObject.publisher?.name)
+  console.log(learningObject.author)
   const metricInfo = [
     { icon: <IconViews className="text-2xl invertLogo-HC-white" />, name: "Visualizações", data: learningObject.stats.views },
     { icon: <FavoriteOutlinedIcon />, name: "Curtidas", data: learningObject.stats.likes },

src/app/recurso/[id]/components/resourceInfo.js

 import { Tabs, Tab, Paper, Divider, Box } from "@mui/material";
+import AuthorsIcon from '@mui/icons-material/Groups2Rounded';
 import { useState, useLayoutEffect, createRef } from "react";
 import Specifications from "./specifications";
+import Authors from "./authors"
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import Description from "./description";
@@ -45,13 +47,14 @@ export default function ResourceInfo({ learningObject }) {
     description: <Description data={learningObject.description} />,
     specifications: <Specifications learningObject={learningObject} />,
     metrics: <Metrics learningObject={learningObject} />,
+    authors: <Authors data={learningObject.author}/>
   };
 
   return (
     <>
       <Paper className="bg-white-HC-dark  outline outline-1 outline-ice-HC-white shadow-none flex flex-col flex-shrink-0 rounded-xl m-1 normal-case">
         <Tabs
-          className=""
+          className="max-sm:no-scrollbar max-sm:overflow-x-auto max-sm:animate-scrollHint"
           value={value}
           variant="fullWidth"
           onChange={handleChange}
@@ -102,6 +105,23 @@ export default function ResourceInfo({ learningObject }) {
             value="metrics" 
             label="Métricas"
             />
+          <Tab 
+            sx={{
+              display: { xs: "flex", sm: "none" }, // Show on small screens, hide on larger
+              justifyContent: "center",
+              borderBottom: value === "authors" ? "2px solid var(--turquoise-HC-white)" : "none",
+            }}
+            value="authors" 
+            label={<AuthorsIcon className="text-darkGray-HC-white"/>}
+          />
+          <Tab
+            sx={{
+              display: { xs: "none", sm: "flex" }, // Hide on small screens, show on larger
+            }} 
+            className="text-xl normal-case hover:bg-ice-HC-dark rounded-lg text-darkGray-HC-white-underline focus:text-turquoise-HC-white-underline" 
+            value="authors" 
+            label="Autores" 
+          />
         </Tabs>
         <hr style={{ borderTop: "1px solid var(--lightGray-HC-white)" }} />
         {viewMore ? (