Cleanup: move components out

src/components/card.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Nebari Development Team.
+// Distributed under the terms of the Modified BSD License.
+import { TranslationBundle } from '@jupyterlab/translation';
+import { classes, LabIcon } from '@jupyterlab/ui-components';
+import * as React from 'react';
+import { IItem } from '../types';
+
+export function TypeCard(props: {
+  trans: TranslationBundle;
+  item: IItem;
+}): React.ReactElement {
+  const { item } = props;
+  return (
+    <div
+      onClick={() => item.execute()}
+      className="jp-Launcher-TypeCard jp-LauncherCard"
+      title={item.caption}
+      tabIndex={0}
+    >
+      <div className="jp-LauncherCard-icon">
+        <LabIcon.resolveReact
+          icon={item.icon}
+          iconClass={classes(item.iconClass, 'jp-Icon-cover')}
+        />
+      </div>
+      <div className="jp-LauncherCard-label">
+        <p>{item.label}</p>
+      </div>
+    </div>
+  );
+}

src/components/section.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Nebari Development Team.
+// Distributed under the terms of the Modified BSD License.
+import { classes, LabIcon, caretRightIcon } from '@jupyterlab/ui-components';
+import * as React from 'react';
+
+export function CollapsibleSection(
+  props: React.PropsWithChildren<{
+    title: string;
+    className: string;
+    icon: LabIcon;
+    open: boolean;
+  }>
+) {
+  const [open, setOpen] = React.useState<boolean>(props.open);
+
+  const handleToggle = (event: { currentTarget: { open: boolean } }) =>
+    setOpen(event.currentTarget.open);
+
+  return (
+    <details
+      onToggle={handleToggle}
+      className={classes(props.className, 'jp-CollapsibleSection')}
+      open={open}
+    >
+      <summary>
+        <div
+          className="jp-CollapsibleSection-CollapserIconWrapper"
+          aria-hidden="true"
+        >
+          <caretRightIcon.react className="jp-CollapsibleSection-CollapserIcon" />
+        </div>
+        <props.icon.react
+          tag="span"
+          className="jp-CollapsibleSection-CategoryIcon"
+        />
+        <h3 className="jp-CollapsibleSection-Title">{props.title}</h3>
+      </summary>
+      <div className="jp-Launcher-CardGroup jp-Launcher-cardContainer">
+        {props.children}
+      </div>
+    </details>
+  );
+}