[FE][CPF-61] Bug: Skills are not expandable

frontend/src/components/common/AccordionList/AccordionList.interface.ts

@@ -8,4 +8,5 @@ export interface AccordionListProps {
 
 export interface AccordionListItemProps {
   title: string;
+  noContentTooltipText: string;
 }

frontend/src/components/common/AccordionList/AccordionList.tsx

@@ -6,7 +6,7 @@ export const AccordionList = ({ items }: PropsWithChildren<AccordionListProps>)
   return (
     <div className="flex flex-col">
       {items.map(({ title, children, key }) => (
-        <AccordionListItem key={key} title={title}>
+        <AccordionListItem key={key} title={title} noContentTooltipText="There's no description for this skill.">
           {children}
         </AccordionListItem>
       ))}

frontend/src/components/common/AccordionList/AccordionListItem.tsx

@@ -2,28 +2,40 @@ import { PropsWithChildren, useState } from 'react';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { generateClassNames } from '@app/utils';
 import { AccordionListItemProps } from './AccordionList.interface';
+import { Tooltip } from '@app/components/common/Tooltip';
 
-export const AccordionListItem = ({ title, children }: PropsWithChildren<AccordionListItemProps>) => {
+export const AccordionListItem = ({
+  title,
+  noContentTooltipText,
+  children,
+}: PropsWithChildren<AccordionListItemProps>) => {
   const [isOpen, setOpen] = useState(false);
+  const disableExpand = !children;
+
+  const handleClick = () => {
+    setOpen((prevState) => !prevState);
+  };
 
   return (
     <div className="border-b border-b-navy-200 px-2 py-4">
       <h3>
         <button
           type="button"
           className={generateClassNames('flex w-full items-center justify-between', { 'cursor-auto': !children })}
-          onClick={() => setOpen(!isOpen)}
+          onClick={disableExpand ? undefined : handleClick}
         >
           <span className="text-left text-base font-medium text-navy-600">{title}</span>
-          <div className="flex min-h-10 min-w-10 items-center justify-center">
-            {children ? (
-              <ChevronRightIcon className={generateClassNames('rotate-90 text-navy-500', { '-rotate-90': isOpen })} />
-            ) : undefined}
-          </div>
+          <Tooltip tooltipText={noContentTooltipText}>
+            <div
+              className={`flex min-h-10 min-w-10 cursor-pointer items-center justify-center ${disableExpand ? 'text-navy-300' : 'text-navy-500'}`}
+            >
+              <ChevronRightIcon className={generateClassNames('rotate-90', { '-rotate-90': isOpen })} />
+            </div>
+          </Tooltip>
         </button>
       </h3>
       {children ? (
-        <div className={generateClassNames('mt-4 text-sm font-normal text-navy-600', { hidden: !isOpen })}>
+        <div className={`font-normal text-navy-600 duration-300 ${isOpen ? 'mt-4 h-auto text-sm' : 'h-0 text-[0px]'}`}>
           {children}
         </div>
       ) : undefined}

frontend/src/components/common/Tooltip/Tooltip.interface.ts

@@ -0,0 +1,3 @@
+export interface TooltipProps {
+  tooltipText: string;
+}

frontend/src/components/common/Tooltip/Tooltip.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { FC, PropsWithChildren, useState } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { TooltipProps } from './Tooltip.interface';
+
+export const TooltipPopover: FC<PropsWithChildren<TooltipProps>> = ({ tooltipText, children }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover className="relative">
+      <Popover.Button
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        className="focus:outline-none"
+      >
+        {children}
+      </Popover.Button>
+      <Transition
+        show={open}
+        enter="transition duration-100 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        <Popover.Panel static className={`absolute z-10 w-screen max-w-max rounded bg-grey-800 px-3 py-2`}>
+          <div className="max-w-[480px] text-sm text-white shadow-lg">
+            <p>{tooltipText}</p>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+};

frontend/src/components/common/Tooltip/index.ts

@@ -0,0 +1 @@
+export { TooltipPopover as Tooltip } from './Tooltip';

frontend/tailwind.config.ts

@@ -50,6 +50,9 @@ const config: Config = {
         500: '#E9CE40',
         600: '#C6A700',
       },
+      grey: {
+        800: '#2C2E3A',
+      }
     },
     fontSize: {
       xs: ['0.75rem', '1rem'], // Body XS