implemented DropdownComponent.tsx

src/components/DropdownComponent.tsx

@@ -0,0 +1,45 @@
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonItem,
+  IonLabel,
+} from "@ionic/react";
+import "../components/ListComponent";
+import ListComponent from "../components/ListComponent";
+import "../intefaces";
+import Category from "../intefaces";
+
+const DropdownComponent: React.FC<{
+  category: Category[];
+}> = (props) => {
+  const category = props.category;
+  return (
+    <IonAccordionGroup>
+      {category.map((catItem: Category, index) => {
+        var position = "";
+        if (index === 1) {
+          position = "first";
+        } else if (index === 2) {
+          position = "second";
+        } else if (index === 3) {
+          position = "third";
+        } else if (index === 4) {
+          position = "fourth";
+        } else if (index === 5) {
+          position = "fifth";
+        }
+        return (
+          <IonAccordion value={position}>
+            <IonItem slot="header" color="light">
+              <IonLabel>{catItem.name}</IonLabel>
+            </IonItem>
+            <IonItem slot="content">
+              <ListComponent items={catItem.listItems} />
+            </IonItem>
+          </IonAccordion>
+        );
+      })}
+    </IonAccordionGroup>
+  );
+};
+export default DropdownComponent;