feat: hook up the matching form to the server

packages/webapp/src/components/Aside/Aside.module.scss

@@ -0,0 +1,10 @@
+.title{
+  align-items: center;
+  background: #fff;
+  border-bottom: 1px solid #E1E2E9;
+  display: flex;
+  flex: 0 0 auto;
+  min-height: 40px;
+  padding: 5px 5px 5px 15px;
+  z-index: 0;
+}

packages/webapp/src/components/Aside/Aside.tsx

@@ -0,0 +1,40 @@
+import { Button, Classes } from '@blueprintjs/core';
+import { Box, Group } from '../Layout';
+import { Icon } from '../Icon';
+import styles from './Aside.module.scss';
+
+interface AsideProps {
+  title?: string;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  hideCloseButton?: boolean;
+}
+
+export function Aside({
+  title,
+  onClose,
+  children,
+  hideCloseButton,
+}: AsideProps) {
+  const handleClose = () => {
+    onClose && onClose();
+  };
+  return (
+    <Box>
+      <Group position="apart" className={styles.title}>
+        {title}
+
+        {hideCloseButton !== true && (
+          <Button
+            aria-label="Close"
+            className={Classes.DIALOG_CLOSE_BUTTON}
+            icon={<Icon icon={'smallCross'} color={'#000'} />}
+            minimal={true}
+            onClick={handleClose}
+          />
+        )}
+      </Group>
+      <Box>{children}</Box>
+    </Box>
+  );
+}