ListElement

src/components/Element/Complex/ListElement.tsx

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import type { Element } from 'src/types/element';
+import RequestApprovalElement from './RequestApprovalElement';
+import MissileIncomingElement from './MissileIncomingElement';
+
+type ListElementProps = {
+  element: Element;
+  outerDivStyleClass: string;
+  children?: ReactNode;
+};
+
+const ListElement = ({
+  element,
+  outerDivStyleClass,
+  children,
+}: ListElementProps) => {
+  const renderElement = () => {
+    switch (element.type) {
+      case 'request-approval':
+        return <RequestApprovalElement element={element} />;
+      case 'missile-incoming':
+        return <MissileIncomingElement element={element} />;
+      default:
+        return <div>{element.type}</div>;
+    }
+  };
+
+  return (
+    <div className={outerDivStyleClass}>
+      {renderElement()}
+      {children}
+    </div>
+  );
+};
+
+export default ListElement;

src/components/Element/ElementList.tsx

@@ -1,9 +0,0 @@
-import type { Element as ElementType } from 'src/types/modalities';
-
-type ElementListProps = {
-  elements: ElementType[];
-};
-
-const ElementList = ({ elements }: ElementListProps) => {};
-
-export default ElementList;

src/components/Widget/ListWidget.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-import Element from 'src/components/Element/Element';
 import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
 import {
   updateCommunication,
@@ -7,6 +6,7 @@ import {
 } from 'src/redux/slices/communicationSlice';
 import { getElementsInGaze, getGazesAndKeys } from 'src/redux/slices/gazeSlice';
 import type { Widget } from 'src/types/widget';
+import ListElement from 'src/components/Element/Complex/ListElement';
 
 type ListWidgetProps = {
   widget: Widget;
@@ -156,16 +156,15 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
             : '';
 
         return (
-          // ListWidget enforces a certain layout and style for its Elements
           <div
             id={element.id}
             key={element.id}
             style={{ height: LIST_ELEMENT_HEIGHT }}
             className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${hoverStyle} ${activeElementStyle}`}
           >
-            <Element element={element} styleClass="w-full h-full">
+            <ListElement element={element} outerDivStyleClass="w-full h-full">
               {/* Nested children here if wanted.. */}
-            </Element>
+            </ListElement>
           </div>
         );
       })}