expand / collapse

client/src/features/info/InfoTitle.jsx

@@ -1,37 +1,43 @@
 import { Icon } from '@chakra-ui/react';
+import { useState } from 'react';
 import { FiChevronUp } from 'react-icons/fi';
 import style from './Info.module.css';
 
 export default function InfoTitle(props) {
+  const [collapsed, setCollapsed] = useState(false);
+
   const { title, data } = props;
   return (
     <div className={style.container}>
       <div className={style.header}>
         {title}
         <Icon
-          className={style.moreExpanded}
+          className={collapsed ? style.moreCollapsed : style.moreExpanded}
           as={FiChevronUp}
-          marginTop='-0.5em'
-          // onClick={() => props.setCollapsed(true)}
+          onClick={() => setCollapsed((c) => !c)}
         />
       </div>
 
-      <div>
-        <span className={style.label}>Title: </span>
-        {data.title}
-      </div>
-      <div>
-        <span className={style.label}>Subtitle: </span>
-        {data.subtitle}
-      </div>
-      <div>
-        <span className={style.label}>Presenter: </span>
-        {data.presenter}
-      </div>
-      <div>
-        <span className={style.label}>Notes: </span>
-        {data.note}
-      </div>
+      {!collapsed && (
+        <>
+          <div>
+            <span className={style.label}>Title: </span>
+            {data.title}
+          </div>
+          <div>
+            <span className={style.label}>Presenter: </span>
+            {data.presenter}
+          </div>
+          <div>
+            <span className={style.label}>Subtitle: </span>
+            {data.subtitle}
+          </div>
+          <div>
+            <span className={style.label}>Notes: </span>
+            {data.note}
+          </div>
+        </>
+      )}
     </div>
   );
 }