add backlinks

src/components/common/WithDescription/index.tsx

@@ -0,0 +1,39 @@
+import { FC, ReactNode, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  link?: string;
+}
+
+const WithDescription: FC<Props> = ({ icon, title, subtitle, link }) => {
+  const onClick = useCallback(() => {
+    if (!link) return;
+
+    window.open(link);
+  }, []);
+
+  return (
+    <div
+      onClick={onClick}
+      className={classNames(styles.item, { [styles.link]: link })}
+      role={link ? 'button' : 'none'}
+    >
+      <div className={styles.icon}>{icon}</div>
+
+      <div className={styles.info}>
+        <div className={styles.title}>{title}</div>
+        {!!subtitle?.trim() && (
+          <div className={styles.subtitle}>{subtitle}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { WithDescription };

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

@@ -0,0 +1,35 @@
+@import 'src/styles/variables.scss';
+
+.item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+  text-decoration: none;
+  color: $gray_50;
+  padding: $gap;
+  min-height: 42px;
+
+  &.link {
+    cursor: pointer;
+  }
+}
+
+.icon {
+  fill: currentColor;
+}
+
+.info {
+  flex: 1;
+  margin-left: $gap;
+}
+
+.title {
+  font: $font_16_semibold;
+  line-height: 1.25em;
+}
+
+.subtitle {
+  font: $font_12_medium;
+  opacity: 0.5;
+}