submit bar

src/components/bars/SubmitBar/index.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useCallback } from 'react';
+import { connect } from 'react-redux';
+import { Icon } from '~/components/input/Icon';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { DIALOGS } from '~/redux/modal/constants';
+
+import * as styles from './styles.scss';
+
+const mapStateToProps = null;
+const mapDispatchToProps = {
+  showDialog: MODAL_ACTIONS.modalShowDialog,
+};
+
+type IProps = typeof mapDispatchToProps & {};
+
+const SubmitBarUnconnected: FC<IProps> = ({ showDialog }) => {
+  const onOpenImageEditor = useCallback(() => showDialog(DIALOGS.EDITOR_IMAGE), [showDialog]);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.panel}>
+        <div onClick={onOpenImageEditor}>
+          <Icon icon="image" />
+        </div>
+      </div>
+
+      <div className={styles.button}>
+        <Icon icon="plus" />
+      </div>
+    </div>
+  );
+};
+
+const SubmitBar = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SubmitBarUnconnected);
+
+export { SubmitBar };

src/components/bars/SubmitBar/styles.scss

@@ -0,0 +1,65 @@
+.wrap {
+  position: absolute;
+  right: -($bar_height + $gap);
+
+  &:hover {
+    .panel {
+      transform: translate(0, 0);
+    }
+  }
+
+  @include tablet {
+    position: relative;
+    right: 0;
+    margin-left: $gap;
+  }
+}
+
+.button {
+  background: $red_gradient;
+  width: $bar_height;
+  height: $bar_height;
+  border-radius: $bar_height / 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius $radius 0 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.panel {
+  background: lighten($content_bg, 4%);
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  padding-bottom: $bar_height;
+  border-radius: $radius $radius 0 0;
+  transform: translate(0, 100%);
+  transition: transform 250ms;
+
+  div {
+    @include outer_shadow;
+    height: $bar_height;
+    width: $bar_height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    svg {
+      width: 32px;
+      height: 32px;
+    }
+
+    &:first-child {
+      border-radius: $radius $radius 0 0;
+    }
+  }
+}