#57 added block-based content editor

src/containers/editors/NewEditorBlockVideo/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC, useCallback, useMemo } from 'react';
+import { getYoutubeThumb } from '~/utils/dom';
+import styles from './styles.module.scss';
+import classnames from 'classnames';
+import { InputText } from '~/components/input/InputText';
+import { BlockType, IBlockComponentProps } from '~/redux/types';
+
+const NewEditorBlockVideo: FC<IBlockComponentProps> = ({ block, handler }) => {
+  const setUrl = useCallback((url: string) => handler({ type: BlockType.video, url }), [handler]);
+
+  const url = block.url || '';
+  const preview = useMemo(() => getYoutubeThumb(url), [url]);
+  const backgroundImage = (preview && `url("${preview}")`) || '';
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.input_wrap}>
+        <div className={classnames(styles.input, { active: !!preview })}>
+          <InputText value={url} handler={setUrl} placeholder="Адрес видео" />
+        </div>
+      </div>
+
+      <div className={styles.preview} style={{ backgroundImage }} />
+    </div>
+  );
+};
+export { NewEditorBlockVideo };

src/containers/editors/NewEditorBlockVideo/styles.module.scss

@@ -0,0 +1,33 @@
+@import "src/styles/variables";
+
+.wrap {
+  background-color: red;
+}
+
+.preview {
+  padding-top: 56.25%;
+  position: relative;
+  border-radius: $radius;
+  background: 50% 50% no-repeat;
+  background-size: cover;
+}
+
+.input_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input {
+  flex: 1 0 50%;
+  padding: $gap;
+  background: lighten($content_bg, 4%);
+  border-radius: $radius $radius 0 0;
+  input {
+    text-align: center;
+  }
+
+  &:global(.active) {
+    background: $red;
+  }
+}