Created reusable accordion component and updated IOCDetails to use it

src/components/IOC/IOCDetails.js

-import { Accordion, AccordionDetails, AccordionSummary } from "@material-ui/core";
-import { ExpandMore } from "@material-ui/icons";
 import React from "react";
+import { SimpleAccordion } from "../common/Accordion/StandardAccordion";
 import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
 import { IOCBadge } from "./IOCBadge";
 
 export function IOCDetails({ ioc }) {
-  ioc = {...ioc};
+  ioc = { ...ioc };
   ioc.git = <a href={ioc.git} target="_blank" rel="noreferrer">{ioc.git}</a>
   delete ioc.iocVersion;
   return (
-    <Accordion defaultExpanded>
-      <AccordionSummary expandIcon={<ExpandMore />}>
-        <IOCBadge ioc={ioc} />
-      </AccordionSummary>
-      <AccordionDetails>
-        <KeyValueTable obj={ioc} />
-      </AccordionDetails>
-    </Accordion>
+    <>
+    <SimpleAccordion defaultExpanded summary={<IOCBadge ioc={ioc} />} >
+      <KeyValueTable obj={ioc} />
+    </SimpleAccordion>
+    <SimpleAccordion summary="Deployment">
+      Check me out!
+    </SimpleAccordion>
+    </>
+
+
   );
 
 }
\ No newline at end of file

src/components/common/Accordion/StandardAccordion.js

+import { Accordion, AccordionDetails, AccordionSummary, Container, Typography } from "@material-ui/core";
+import { ExpandMore } from "@material-ui/icons";
+import React from "react";
+
+export function SimpleAccordion({ summary, children, ...rest }) {
+  if (typeof(summary) === "string") {
+    summary = <Container><Typography variant="h6">{summary}</Typography></Container>
+  }
+  
+  if (typeof(children) == "string") {
+    children = <Container><Typography>{children}</Typography></Container>
+  }
+
+  return (
+    <Accordion {...rest}>
+      <AccordionSummary expandIcon={<ExpandMore />}>
+        {summary}
+      </AccordionSummary>
+      <AccordionDetails>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
\ No newline at end of file