refactor flow components

src/components/common/NodeHorizontalCard/index.tsx

@@ -0,0 +1,47 @@
+import { FC, MouseEventHandler } from 'react';
+
+import classNames from 'classnames';
+
+import { Anchor } from '~/components/common/Anchor';
+import { NodeThumbnail } from '~/components/node/NodeThumbnail';
+import { URLS } from '~/constants/urls';
+import { INode } from '~/types';
+import { getPrettyDate } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  node: Partial<INode>;
+  hasNew?: boolean;
+  onClick?: MouseEventHandler;
+}
+
+const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => {
+  return (
+    <Anchor
+      key={node.id}
+      className={styles.item}
+      href={URLS.NODE_URL(node.id)}
+      onClick={onClick}
+    >
+      <div
+        className={classNames(styles.thumb, {
+          [styles.new]: hasNew,
+          [styles.lab]: !node.is_promoted,
+        })}
+      >
+        <NodeThumbnail item={node} />
+      </div>
+
+      <div className={styles.info}>
+        <div className={styles.title}>{node.title || '...'}</div>
+
+        <div className={styles.comment}>
+          <span>{getPrettyDate(node.created_at)}</span>
+        </div>
+      </div>
+    </Anchor>
+  );
+};
+
+export { NodeHorizontalCard };

src/components/common/NodeHorizontalCard/styles.module.scss

@@ -0,0 +1,76 @@
+@import 'src/styles/variables';
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_12_regular;
+  border-radius: $radius;
+  flex-direction: row;
+  margin-bottom: $gap;
+  color: white;
+  text-decoration: none;
+}
+
+.thumb {
+  height: 48px;
+  margin-right: $gap;
+  background: 50% 50% no-repeat;
+  background-size: cover;
+  border-radius: $radius;
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &.new {
+    &::after {
+      content: ' ';
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      background: $color_danger;
+      box-shadow: $content_bg 0 0 0 5px;
+      position: absolute;
+      right: -2px;
+      bottom: -2px;
+    }
+  }
+
+  &.lab {
+    &::after {
+      background: $color_lab;
+    }
+  }
+}
+
+.info {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font: $font_16_semibold;
+  text-transform: capitalize;
+}
+
+.comment {
+  font: $font_12_regular;
+  margin-top: 4px;
+  color: $gray_50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+
+  svg {
+    fill: currentColor;
+    margin-right: $gap * 0.5;
+    margin-top: 1px;
+  }
+}