Add allotment component

web/package.json

@@ -32,6 +32,7 @@
         "@types/react-toastify": "^4.1.0",
         "@types/yaml": "^1.9.7",
         "aidbox-react": "^1.4.0",
+        "allotment": "^1.20.2",
         "babel-loader": "8.1.0",
         "babel-plugin-import": "^1.13.3",
         "classnames": "^2.3.1",

web/src/components/Cell/Cell.module.scss

@@ -0,0 +1,33 @@
+@import 'src/styles/colors';
+
+.title {
+    display: flex;
+    line-height: 32px;
+    margin-bottom: 3px;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.evenContainer {
+    background-color: $base-light-color;
+}
+
+.oddContainer {
+    background-color: $base-surface-color;
+}
+
+.content {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.boxHeader {
+    position: relative;
+}

web/src/components/Cell/index.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+
+import s from './Cell.module.scss';
+
+interface CellProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    even?: boolean;
+}
+
+export function Cell({ title, children, even }: CellProps) {
+    const isEven = even ?? false;
+
+    return (
+        <div className={classNames(s.container, isEven ? s.evenContainer : s.oddContainer)}>
+            <div className={s.content}>
+                <div className={s.boxHeader}>
+                    <h2 className={s.title}>{title}</h2>
+                </div>
+                {children}
+            </div>
+        </div>
+    );
+}