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;
+}