Progressing in implementing a tree representation of features.

src/components/tree/Tree.tsx

@@ -0,0 +1,39 @@
+import { Paper, Stack } from '@suid/material';
+import styled from '@suid/material/styles/styled';
+import { Component, JSXElement, Show } from 'solid-js';
+
+interface Props {
+  title: string;
+  content: JSXElement | undefined;
+  subTree: JSXElement | undefined;
+}
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+const Tree: Component<Props> = ({ title, content, subTree }) => {
+  return (
+    <Stack
+      spacing={1}
+      direction='column'
+      alignItems='center'
+      sx={{ width: 'calc(100% - 5px)' }}
+    >
+      <Item sx={{ width: 'calc(100% - 1px)' }}>
+        <div>{title}</div>
+        <Show when={content !== undefined}>
+          <div>{content}</div>
+        </Show>
+        <Show when={subTree !== undefined}>
+          <div>{subTree}</div>
+        </Show>
+      </Item>
+    </Stack>
+  );
+};
+
+export default Tree;

src/components/tree/index.ts

@@ -0,0 +1 @@
+export { default } from './Tree';