added sample settings page

src/containers/settings/SettingsDeleted/index.tsx

@@ -0,0 +1,45 @@
+import React, { VFC } from 'react';
+
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
+import { Icon } from '~/components/input/Icon';
+import { InputText } from '~/components/input/InputText';
+import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
+import { useFlowStore } from '~/store/flow/useFlowStore';
+
+import styles from './styles.module.scss';
+
+interface SettingsDeletedProps {}
+
+const SettingsDeleted: VFC<SettingsDeletedProps> = () => {
+  const { nodes } = useFlowStore();
+
+  return (
+    <Padder>
+      <Group horizontal>
+        <HorizontalMenu>
+          <HorizontalMenu.Item active>Новые</HorizontalMenu.Item>
+          <HorizontalMenu.Item>Старые</HorizontalMenu.Item>
+        </HorizontalMenu>
+
+        <Filler />
+
+        <InputText suffix={<Icon icon="search" size={24} />} />
+      </Group>
+
+      <br />
+
+      <div className={styles.grid}>
+        {nodes.map(node => (
+          <div className={styles.item} key={node.id}>
+            <FlowRecentItem node={node} key={node.id} />
+          </div>
+        ))}
+      </div>
+    </Padder>
+  );
+};
+
+export { SettingsDeleted };

src/containers/settings/SettingsDeleted/styles.module.scss

@@ -0,0 +1,13 @@
+@import "src/styles/variables";
+
+.grid {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+}
+
+.item {
+  min-width: 0;
+}

src/containers/settings/SettingsNotes/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState, VFC } from 'react';
+
+import Masonry from 'react-masonry-css';
+
+import { Card } from '~/components/containers/Card';
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import { InputText } from '~/components/input/InputText';
+import { Textarea } from '~/components/input/Textarea';
+import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
+
+import styles from './styles.module.scss';
+
+interface SettingsNotesProps {}
+
+const breakpointCols = {
+  default: 2,
+  1280: 1,
+};
+
+const sampleNotes = [...new Array(40)].map((_, i) => (
+  <Card key={i} style={{ height: Math.random() * 400 + 50 }}>
+    {i}
+  </Card>
+));
+
+const SettingsNotes: VFC<SettingsNotesProps> = () => {
+  const [text, setText] = useState('');
+
+  return (
+    <div>
+      <Padder>
+        <Group horizontal>
+          <HorizontalMenu>
+            <HorizontalMenu.Item active>Новые</HorizontalMenu.Item>
+            <HorizontalMenu.Item>Старые</HorizontalMenu.Item>
+          </HorizontalMenu>
+
+          <Filler />
+
+          <InputText suffix={<Icon icon="search" size={24} />} />
+        </Group>
+      </Padder>
+
+      <Masonry
+        className={styles.wrap}
+        breakpointCols={breakpointCols}
+        columnClassName={styles.column}
+      >
+        <Card>
+          <Group>
+            <Textarea handler={setText} value={text} />
+
+            <Group horizontal>
+              <Filler />
+              <Button size="mini">Добавить</Button>
+            </Group>
+          </Group>
+        </Card>
+
+        {sampleNotes}
+      </Masonry>
+    </div>
+  );
+};
+
+export { SettingsNotes };

src/containers/settings/SettingsNotes/styles.module.scss

@@ -0,0 +1,27 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+div.wrap {
+  display: flex;
+  width: 100%;
+  margin-right: 0;
+  padding: $gap $gap * 0.5;
+
+  @include tablet {
+    padding: 0 $gap * 0.5;
+  }
+}
+
+.column {
+  background-clip: padding-box;
+  box-sizing: border-box;
+  padding: 0 $gap * 0.5;
+
+  @include tablet {
+    padding: 0;
+  }
+
+  & > div {
+    margin-bottom: $gap;
+  }
+}