Use new exported components

src/index.tsx

@@ -1,8 +1,10 @@
 import {
-  Button,
+  ButtonItem,
   definePlugin,
   Menu,
   MenuItem,
+  PanelSection,
+  PanelSectionRow,
   ServerAPI,
   showModal,
   staticClasses,
@@ -35,24 +37,31 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({}) => {
   // };
 
   return (
-    <div>
+    <PanelSection title="Panel Section">
-      <Button
+      <PanelSectionRow>
-        layout="below"
+        <ButtonItem
-        onClick={(e) =>
+          layout="below"
-          showModal(
+          onClick={(e) =>
-            <Menu label="Menu" cancelText="CAAAANCEL" onCancel={() => {}}>
+            showModal(
-              <MenuItem onSelected={() => {}}>Item #1</MenuItem>
+              <Menu label="Menu" cancelText="CAAAANCEL" onCancel={() => {}}>
-              <MenuItem onSelected={() => {}}>Item #2</MenuItem>
+                <MenuItem onSelected={() => {}}>Item #1</MenuItem>
-              <MenuItem onSelected={() => {}}>Item #3</MenuItem>
+                <MenuItem onSelected={() => {}}>Item #2</MenuItem>
-            </Menu>,
+                <MenuItem onSelected={() => {}}>Item #3</MenuItem>
-            e.currentTarget ?? window
+              </Menu>,
-          )
+              e.currentTarget ?? window
-        }
+            )
-      >
+          }
-        Server says yolo
+        >
-      </Button>
+          Server says yolo
-      <img src={logo} />
+        </ButtonItem>
-    </div>
+      </PanelSectionRow>
+
+      <PanelSectionRow>
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <img src={logo} />
+        </div>
+      </PanelSectionRow>
+    </PanelSection>
   );
 };