diff --git a/src/components/lab/LabBottomPanel/index.tsx b/src/components/lab/LabBottomPanel/index.tsx index 9e9d6316..e1789a98 100644 --- a/src/components/lab/LabBottomPanel/index.tsx +++ b/src/components/lab/LabBottomPanel/index.tsx @@ -1,15 +1,34 @@ import React, { FC } from 'react'; import { Group } from '~/components/containers/Group'; -import { INodeComponentProps } from '~/redux/node/constants'; import { Filler } from '~/components/containers/Filler'; import styles from './styles.module.scss'; import { getPrettyDate } from '~/utils/dom'; +import { INode } from '~/redux/types'; +import { Icon } from '~/components/input/Icon'; +import classNames from 'classnames'; +import { Grid } from '~/components/containers/Grid'; -const LabBottomPanel: FC = ({ node }) => ( +type Props = { + node: INode; + isLoading?: boolean; + hasNewComments: boolean; + commentCount: number; +}; + +const LabBottomPanel: FC = ({ node, hasNewComments, commentCount }) => (
{getPrettyDate(node.created_at)}
- + + + + {node.like_count} + + + + + {commentCount} +
); diff --git a/src/components/lab/LabBottomPanel/styles.module.scss b/src/components/lab/LabBottomPanel/styles.module.scss index 9a2f5871..0a4be156 100644 --- a/src/components/lab/LabBottomPanel/styles.module.scss +++ b/src/components/lab/LabBottomPanel/styles.module.scss @@ -8,3 +8,20 @@ font: $font_12_regular; color: darken(white, 40%); } + +.comments.comments { + flex: 0; + font: $font_16_semibold; + color: darken(white, 50%); + fill: currentColor; + stroke: none; + column-gap: $gap / 2 !important; + + &.active { + color: $red; + } +} + +.like { + +} diff --git a/src/components/lab/LabNode/index.tsx b/src/components/lab/LabNode/index.tsx index 4d5fe911..94dc699d 100644 --- a/src/components/lab/LabNode/index.tsx +++ b/src/components/lab/LabNode/index.tsx @@ -1,21 +1,35 @@ -import React, { FC } from 'react'; +import React, { FC, useMemo } from 'react'; import { INode } from '~/redux/types'; import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks'; import styles from './styles.module.scss'; import { LabBottomPanel } from '~/components/lab/LabBottomPanel'; +import { isAfter, parseISO } from 'date-fns'; interface IProps { node: INode; + lastSeen: string | null; isLoading?: boolean; + commentCount: number; } -const LabNode: FC = ({ node, isLoading }) => { +const LabNode: FC = ({ node, isLoading, lastSeen, commentCount }) => { const { lab } = useNodeBlocks(node, false); + const hasNewComments = useMemo( + () => + !!node.commented_at && !!lastSeen && isAfter(parseISO(node.commented_at), parseISO(lastSeen)), + [node.commented_at, lastSeen] + ); + return (
{lab} - +
); }; diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index 5dc8c816..a075ea7a 100644 --- a/src/containers/lab/LabGrid/index.tsx +++ b/src/containers/lab/LabGrid/index.tsx @@ -12,7 +12,12 @@ const LabGrid: FC = () => { return (
{nodes.map(node => ( - + ))}
); diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 6c8c9c5e..8755a016 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -89,18 +89,10 @@ export type INodeComponentProps = { export type INodeComponents = Record, FC>; export const LAB_PREVIEW_LAYOUT: Record[]> = { - [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabBottomPanel], - [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle, LabBottomPanel], - [NODE_TYPES.AUDIO]: [ - LabPad, - LabNodeTitle, - LabPad, - NodeAudioImageBlock, - NodeAudioBlock, - LabPad, - LabBottomPanel, - ], - [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad, LabBottomPanel], + [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle], + [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle], + [NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, LabPad, NodeAudioImageBlock, NodeAudioBlock, LabPad], + [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad], }; export const NODE_HEADS: INodeComponents = { diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index ee678362..9ace8331 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -const Sprites: FC<{}> = () => ( +const Sprites: FC = () => ( = () => ( + + + + + + + + + +