great new editor!

src/containers/examples/HorizontalExample/index.tsx

@@ -5,6 +5,9 @@ import {Padder} from "~/components/containers/Padder";
 import {Group} from "~/components/containers/Group";
 import {InputText} from "~/components/input/InputText";
 import {Button} from "~/components/input/Button";
+import {Filler} from "~/components/containers/Filler";
+import {Icon} from "~/components/input/Icon";
+import {CellGrid} from "~/components/containers/CellGrid";
 
 interface IProps {}
 
@@ -12,14 +15,39 @@ const HorizontalExample: FC<IProps> = () => (
   <div className={styles.wrap}>
     <Card seamless className={styles.card}>
       <div className={styles.editor}>
+        <Padder className={styles.uploads}>
+          <CellGrid size={150}>
+            <div className={styles.cell} />
+          </CellGrid>
+        </Padder>
 
+        <Padder className={styles.features}>
+          <Group horizontal>
+            <div className={styles.feature_add_btn}>
+              <Icon icon="plus" />
+            </div>
+
+            <div className={styles.feature}>
+              <Group horizontal>
+                <div>ОБЛОЖКА</div>
+                <Icon icon="close" />
+              </Group>
+            </div>
+
+            <Filler />
+
+            <div className={styles.feature_cell}>
+              <Icon icon="cell-single" size={24} />
+            </div>
+          </Group>
+        </Padder>
       </div>
 
       <Padder className={styles.panel}>
         <Group horizontal>
           <InputText title="Название" />
 
-          <Button title="Сохранить" iconRight="play" />
+          <Button title="Сохранить" iconRight="check" />
         </Group>
       </Padder>
     </Card>

src/containers/examples/HorizontalExample/styles.scss

@@ -11,12 +11,14 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  background: darken($content_bg, 4%);
 }
 
 .editor {
+  background: $content_bg;
   min-height: 200px;
   min-width: 50vw;
-  background: darken($content_bg, 4%);
+
   border-radius: $radius;
   display: flex;
   align-items: stretch;
@@ -27,4 +29,50 @@
 }
 
 .panel {
+
+}
+
+.features {
+  display: flex;
+}
+
+.feature_add_btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+  background: $red_gradient;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feature {
+  background: lighten($content_bg, 4%);
+  padding: $gap $gap $gap 20px;
+  border-radius: 24px;
+  font: $font_14_semibold;
+  height: 40px;
+  box-sizing: border-box;
+}
+
+.feature_cell {
+  background: lighten($content_bg, 4%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  box-sizing: border-box;
+  border-radius: $radius;
+}
+
+.uploads {
+  flex: 1;
+  padding-bottom: 0;
+}
+
+.cell {
+  background: lighten($content_bg, 6%);
+  border-radius: $radius;
+  padding-bottom: 100%;
 }