diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index 31f1646a..46a9dbf2 100644 --- a/src/components/node/Comment/index.tsx +++ b/src/components/node/Comment/index.tsx @@ -2,6 +2,7 @@ import React, {FC, HTMLAttributes} from 'react'; import { Card } from "~/components/containers/Card"; import * as styles from './styles.scss'; import classNames = require("classnames"); +import {ParagraphPlaceholder} from "~/components/placeholders/ParagraphPlaceholder"; type IProps = HTMLAttributes & { is_empty?: boolean; @@ -22,7 +23,11 @@ const Comment: FC = ({
-
+
+ { + is_empty && + } +
); diff --git a/src/components/placeholders/ParagraphPlaceholder/index.tsx b/src/components/placeholders/ParagraphPlaceholder/index.tsx new file mode 100644 index 00000000..97683a69 --- /dev/null +++ b/src/components/placeholders/ParagraphPlaceholder/index.tsx @@ -0,0 +1,28 @@ +import React, { FC } from 'react'; +import { Placeholder } from "~/components/placeholders/Placeholder"; +import * as styles from './styles.scss'; +import {Group} from "~/components/containers/Group"; + +const ParagraphPlaceholder = ({ }) => ( + +
+ + + + + + +
+ +
+ + + + + + +
+
+); + +export { ParagraphPlaceholder }; diff --git a/src/components/placeholders/ParagraphPlaceholder/styles.scss b/src/components/placeholders/ParagraphPlaceholder/styles.scss new file mode 100644 index 00000000..e5cc976d --- /dev/null +++ b/src/components/placeholders/ParagraphPlaceholder/styles.scss @@ -0,0 +1,10 @@ +.para { + display: grid; + grid-template-columns: auto; + grid-auto-columns: auto; + grid-template-rows: 1fr; + grid-column-gap: $gap; + grid-auto-flow: column; + + div { display: inline-flex; margin-right: $gap; } +} diff --git a/src/components/placeholders/Placeholder/index.tsx b/src/components/placeholders/Placeholder/index.tsx new file mode 100644 index 00000000..f6f55505 --- /dev/null +++ b/src/components/placeholders/Placeholder/index.tsx @@ -0,0 +1,17 @@ +import React, { FC } from 'react'; +import * as styles from './styles.scss'; + +interface IProps { + width?: number; + height?: number; + color?: string; +} + +const Placeholder: FC = ({ width = 120, height, color }) => ( +
+); + +export { Placeholder }; diff --git a/src/components/placeholders/Placeholder/styles.scss b/src/components/placeholders/Placeholder/styles.scss new file mode 100644 index 00000000..3d1d25e2 --- /dev/null +++ b/src/components/placeholders/Placeholder/styles.scss @@ -0,0 +1,6 @@ +.placeholder { + height: 1em; + width: 120px; + background: transparentize(white, 0.95); + border-radius: 1em; +}