implement get mission gql query and replace TE Accordion with TW Material Accordion

src/components/modals/mission_modal.tsx

@@ -12,14 +12,12 @@ import {
   TEModalBody,
   TEModalFooter,
   TEInput,
-  TETextarea,
   TESelect,
 } from "tw-elements-react";
 import Switch from "../inputs/switch";
 import { Mission } from "@/types/mission";
-import { Collapse, initTE } from "tw-elements";
-import AccordionItem from "../ui/accordion_item";
 import MissionTaskEditor from "../inputs/mission_tasks_editor";
+import { TasksAccordion } from "../ui/tasks_accordions";
 
 export default function MissionModal(props: {
   mission: Mission | null;
@@ -36,10 +34,6 @@ export default function MissionModal(props: {
     setTempMission(mission);
   }, [mission]);
 
-  useEffect(() => {
-    initTE({ Collapse });
-  }, []);
-
   return (
     <div>
       <TEModal show={showModal} setShow={setShowModal}>
@@ -162,22 +156,7 @@ export default function MissionModal(props: {
                     <div>
                       {mission?.tasks ? (
                         <div>
-                          {mission.tasks.map((task, i) => (
-                            <AccordionItem
-                              key={i}
-                              id={`task${i}`}
-                              title={task.name}
-                              description={task.description}
-                              moreInfo={
-                                <div className="ml-3">
-                                  <strong>Agent: </strong>
-                                  <span className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2">
-                                    {task.agent?.role}
-                                  </span>
-                                </div>
-                              }
-                            />
-                          ))}
+                          <TasksAccordion tasks={mission.tasks} />
                         </div>
                       ) : (
                         <div>

src/components/ui/accordion_item.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-
-export default function AccordionItem(props: {
-  key: any;
-  id: string;
-  title: string;
-  description: string;
-  moreInfo?: any;
-}) {
-  const { key, id, title, description, moreInfo } = props;
-  return (
-    <div
-      key={key}
-      className="rounded-t-lg border border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800"
-    >
-      <h2 className="mb-0" id="headingOne">
-        <button
-          className="group relative flex w-full items-center rounded-t-[15px] border-0 bg-white px-5 py-4 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
-          type="button"
-          data-te-collapse-init
-          data-te-target={`#${id}`}
-          aria-expanded="true"
-          aria-controls={`id`}
-        >
-          {title}
-          <span className="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white"></span>
-        </button>
-      </h2>
-      <div id={id} className="!visible hidden my-1 py-1" data-te-collapse-item>
-        <div className="px-5 py-4">{description}</div>
-        {moreInfo ?? null}
-      </div>
-    </div>
-  );
-}

src/components/ui/tasks_accordions.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
+} from "@material-tailwind/react";
+import { Task } from "@/types/task";
+
+export function TasksAccordion({ tasks }: { tasks: Array<Task> }) {
+  const [open, setOpen] = React.useState(0);
+
+  const handleOpen = (value: number) => setOpen(open === value ? 0 : value);
+
+  return (
+    <div>
+      {tasks.map((task, i) => (
+        <Accordion
+          open={open === i}
+          className="mb-2 rounded-lg border border-blue-gray-100 px-4"
+          placeholder={undefined}
+        >
+          <AccordionHeader
+            onClick={() => handleOpen(i)}
+            className={`border-b-0 transition-colors ${open === i ? "text-blue-500 hover:!text-blue-700" : "text-gray-400 hover:!text-gray-300"}`}
+            placeholder={undefined}
+          >
+            {task.name}
+          </AccordionHeader>
+          <AccordionBody className="pt-0 text-base font-normal">
+            <div className="mb-3">
+              <span className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2">
+                {task.agent?.role}
+              </span>
+            </div>
+            <div>{task.description}</div>
+          </AccordionBody>
+        </Accordion>
+      ))}
+    </div>
+  );
+}