telegram: add button to boris

src/components/boris/BorisContactItem/index.tsx

@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode, useCallback } from 'react';
 
+import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 
 import styles from './styles.module.scss';
@@ -9,19 +10,44 @@ interface Props {
   title: string;
   subtitle: string;
   link: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
 }
 
-const BorisContactItem: FC<Props> = ({ icon, title, subtitle, link }) => (
-  <a className={styles.item} href={link} target="_blank" rel="noreferrer">
-    <div className={styles.icon}>
-      <Icon icon={icon} size={32} />
-    </div>
+const BorisContactItem: FC<Props> = ({
+  icon,
+  title,
+  subtitle,
+  link,
+  prefix,
+  suffix,
+}) => {
+  const onClick = useCallback(() => {
+    if (!link) return;
 
-    <div className={styles.info}>
-      <div className={styles.title}>{title}</div>
-      <div className={styles.subtitle}>{subtitle}</div>
+    window.open(link);
+  }, []);
+
+  return (
+    <div>
+      {prefix}
+      <div
+        onClick={onClick}
+        className={styles.item}
+        role={link ? 'button' : 'none'}
+      >
+        <div className={styles.icon}>
+          <Icon icon={icon} size={32} />
+        </div>
+
+        <div className={styles.info}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.subtitle}>{subtitle}</div>
+        </div>
+      </div>
+      {suffix}
     </div>
-  </a>
-);
+  );
+};
 
 export { BorisContactItem };

src/components/boris/BorisContacts/index.tsx

@@ -1,12 +1,18 @@
 import React, { FC } from 'react';
 
 import { BorisContactItem } from '~/components/boris/BorisContactItem';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { Button } from '~/components/input/Button';
 
 import styles from './styles.module.scss';
 
-interface Props {}
+interface Props {
+  canConnectTelegram: boolean;
+  connectTelegram: () => void;
+}
 
-const BorisContacts: FC<Props> = () => (
+const BorisContacts: FC<Props> = ({ canConnectTelegram, connectTelegram }) => (
   <div className={styles.contacts}>
     <BorisContactItem
       icon="vk"
@@ -15,19 +21,26 @@ const BorisContacts: FC<Props> = () => (
       subtitle="паблик вконтакте"
     />
 
-    <BorisContactItem
-      icon="telegram"
-      title="Телеграм-бот"
-      link="https://t.me/vault48bot"
-      subtitle="@vault48bot"
-    />
-
     <BorisContactItem
       icon="github"
       title="Github"
       link="https://github.com/muerwre?tab=repositories&q=vault"
       subtitle="исходники Убежища"
     />
+
+    <BorisContactItem
+      icon="telegram"
+      title="Телеграм-бот"
+      link="https://t.me/vault48bot"
+      subtitle="@vault48bot"
+      suffix={
+        canConnectTelegram && (
+          <Padder>
+            <Button onClick={connectTelegram}>Получать уведомления</Button>
+          </Padder>
+        )
+      }
+    />
   </div>
 );