feat: expand class information about request card ucs when hovered

src/components/exchange/requests/view/cards/RequestCard.tsx

@@ -22,56 +22,67 @@ export const RequestCard = ({
   setHiddenRequests
 }: Props) => {
   const [open, setOpen] = useState<boolean>(false);
+  const [hovered, setHovered] = useState<boolean>(false);
 
   const hide = () => {
     const newHidden = new Set(hiddenRequests);
     newHidden.add(request.id);
     setHiddenRequests(newHidden);
   }
 
-  return <Card key={request.id} className={`shadow-md ${hiddenRequests.has(request.id) ? "hidden" : ""}`}>
+  return <Card
+    onMouseOver={() => { setHovered(true) }}
+    onMouseLeave={() => { setHovered(false) }}
+    key={request.id}
+    className={`shadow-md ${hiddenRequests.has(request.id) ? "hidden" : ""}`}
+  >
     <CardHeader className="flex flex-row gap-x-2 items-center p-4">
       <img className="w-10 h-10 rounded-full shadow-md" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png"></img>
       <div className="flex flex-row justify-between items-center w-full">
-        <div className="flex flex-col gap-y-1">
-          <CardTitle>{request.issuer_name}</CardTitle>
+        <div className="flex flex-col w-full">
+          <div className="flex flex-row justify-between w-full items-center">
+            <CardTitle>{request.issuer_name}</CardTitle>
+            <div className="flex flex-row items-center">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="icon" className="text-black" onClick={() => hide()}>
+                      <ArchiveBoxIcon className="h-5 w-5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Esconder</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              {open
+                ?
+                <Button variant="icon" className="text-black" onClick={() => setOpen(false)}>
+                  <ChevronUpIcon className="h-5 w-5" />
+                </Button>
+                : <Button variant="icon" className="text-black" onClick={() => setOpen(true)}>
+                  <ChevronDownIcon className="h-5 w-5" />
+                </Button>
+              }
+            </div>
+          </div>
           <CardDescription>
             {open
               ? <p>{request.issuer_nmec}</p>
               :
-              <div className="flex flex-row space-x-1">
+              <div className="flex flex-row gap-x-1 gap-y-2 flex-wrap">
                 {request.options?.map((option) => (
-                  <RequestCardClassBadge option={option} />
+                  <RequestCardClassBadge
+                    option={option}
+                    requestCardHovered={hovered}
+                  />
                 ))}
               </div>
 
             }
           </CardDescription>
         </div>
-        <div className="flex flex-row items-center">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="icon" className="text-black" onClick={() => hide()}>
-                  <ArchiveBoxIcon className="h-5 w-5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Esconder</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-
-          {open
-            ?
-            <Button variant="icon" className="text-black" onClick={() => setOpen(false)}>
-              <ChevronUpIcon className="h-5 w-5" />
-            </Button>
-            : <Button variant="icon" className="text-black" onClick={() => setOpen(true)}>
-              <ChevronDownIcon className="h-5 w-5" />
-            </Button>
-          }
-        </div>
       </div>
     </CardHeader>
     <CardContent className={`p-0 px-4 ${open ? "" : "hidden"}`}>

src/components/exchange/requests/view/cards/RequestCardClassBadge.tsx

@@ -4,21 +4,18 @@ import { Badge } from "../../../../ui/badge";
 
 type Props = {
   option: ExchangeOption
+  requestCardHovered: boolean
 }
 
-const RequestCardClassBadge = ({ option }: Props) => {
-  const [showIssuerDestClass, setShowIssuerDestClass] = useState<boolean>(false);
-
+const RequestCardClassBadge = ({ option, requestCardHovered }: Props) => {
   return <div className="flex flex-row">
     <Badge
       className="bg-gray-100 text-black"
-      onMouseOver={() => setShowIssuerDestClass(true)}
-      onMouseLeave={() => setShowIssuerDestClass(false)}
     >
       {option.course_unit_acronym}
     </Badge>
     <Badge
-      className={`relative right-2 bg-gray-300 text-black ${showIssuerDestClass ? "block" : "hidden"} transition-all delay-1000`}
+      className={`relative right-2 bg-gray-300 text-black ${requestCardHovered ? "block" : "hidden"} transition-all delay-1000`}
     >
       {option.class_issuer_goes_to}
     </Badge>