image layout

src/components/node/NodePanel/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { Group } from "~/components/containers/Group";
+import { Filler } from "~/components/containers/Filler";
+
+interface IProps {}
+
+const NodePanel: FC<IProps> = () => (
+    <div className={styles.wrap}>
+      <Group horizontal className={styles.panel}>
+        <Filler>
+          <div className={styles.title}>Node title</div>
+          <div className={styles.name}>~author</div>
+        </Filler>
+      </Group>
+
+      <div className={styles.mark} />
+    </div>
+);
+
+export { NodePanel };

src/components/node/NodePanel/styles.scss

@@ -0,0 +1,76 @@
+.wrap {
+  //height: $node_title_height;
+  //background: $node_title_background;
+  background: transparentize(black, 0.9);
+  padding: $gap;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  //border-radius: $radius $radius 0 0;
+  //box-shadow: transparentize(black, 0.3) 0 2px, inset transparentize(white, 0.98) 0 1px;
+  box-shadow: transparentize(white, 0.97) 0 1px, inset transparentize(white, 0.97) 0 1px;
+  position: relative;
+}
+
+.title {
+  text-transform: uppercase;
+  font: $font_24_semibold;
+  height: 24px;
+  padding-bottom: 6px;
+}
+
+.name {
+  font: $font_12_regular;
+  color: transparentize(white, 0.5);
+}
+
+.btn {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: transparentize(white, 0.5);
+}
+
+.panel {
+  flex: 1;
+}
+
+.buttons {
+  height: 54px;
+  border-radius: $radius $radius 0 0;
+  background: linear-gradient(176deg, #f42a00, #5c1085);
+  background: #222222;
+  position: absolute;
+  bottom: 0;
+  right: 10px;
+  width: 270px;
+  display: flex;
+}
+
+.mark {
+  flex: 0 0 32px;
+  background: red;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -38px;
+    right: 4px;
+    width: 24px;
+    height: 52px;
+    background: #ff3344;
+    box-shadow: transparentize(black, 0.8) 4px 2px;
+  }
+}
+
+.sep {
+  flex: 0 0 12px;
+  height: 6px;
+  width: 12px;
+  border-radius: 4px;
+  background: transparentize(black, 0.7);
+}