From e72ee5766ab77849c87ba00dc5155697b025270f Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 4 Sep 2024 16:32:58 +0200
Subject: [PATCH] spot use player comp for tabs

---
 .../Player/ReplayPlayer/PlayerBlockHeader.tsx |  1 -
 frontend/app/components/Session/Tabs/Tabs.tsx |  4 +-
 .../components/SpotPlayerHeader.tsx           | 83 ++++++++++++-------
 3 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
index 897eb008e..75cb9cbe7 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
@@ -1,4 +1,3 @@
-
 import { useStore } from "App/mstore";
 import React from 'react';
 import { connect } from 'react-redux';
diff --git a/frontend/app/components/Session/Tabs/Tabs.tsx b/frontend/app/components/Session/Tabs/Tabs.tsx
index 4e8cc87ff..bbf3d5b34 100644
--- a/frontend/app/components/Session/Tabs/Tabs.tsx
+++ b/frontend/app/components/Session/Tabs/Tabs.tsx
@@ -23,7 +23,7 @@ const Tabs = ({ tabs, active, onClick, border = true, className }: Props) => {
     <div className={cn(stl.tabs, className, { [stl.bordered]: border })} role="tablist">
       <Segmented
         value={active}
-        options={tabs.map(({ key, text, hidden = false, disabled = false }) => ({
+        options={tabs.map(({ key, text, hidden = false, disabled = false, iconComp = null }) => ({
           label: (
             <div
               onClick={() => {
@@ -31,7 +31,7 @@ const Tabs = ({ tabs, active, onClick, border = true, className }: Props) => {
               }}
               className={'font-semibold flex gap-1 items-center'}
             >
-              <Icon size={16} color={'black'} name={iconMap[key as keyof typeof iconMap]} />
+              {iconComp ? iconComp : <Icon size={16} color={'black'} name={iconMap[key as keyof typeof iconMap]} />}
               <span>{text}</span>
             </div>
           ),
diff --git a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
index 47c5e49e6..ef69a9482 100644
--- a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
@@ -1,24 +1,37 @@
-import { ArrowLeftOutlined, CommentOutlined, CopyOutlined, DeleteOutlined, DownloadOutlined, MoreOutlined, SettingOutlined, UserSwitchOutlined } from '@ant-design/icons';
-import { Badge, Button, Dropdown, MenuProps, Popover, Tooltip, message } from 'antd';
+import {
+  ArrowLeftOutlined,
+  CommentOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  MoreOutlined,
+  SettingOutlined,
+  UserSwitchOutlined,
+} from '@ant-design/icons';
+import {
+  Badge,
+  Button,
+  Dropdown,
+  MenuProps,
+  Popover,
+  Tooltip,
+  message,
+} from 'antd';
 import copy from 'copy-to-clipboard';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-
-
+import Tabs from 'App/components/Session/Tabs';
 import { useStore } from 'App/mstore';
 import { spotsList } from 'App/routes';
 import { hashString } from 'App/types/session/session';
 import { Avatar, Icon } from 'UI';
 
-
-
 import { TABS, Tab } from '../consts';
 import AccessModal from './AccessModal';
 
-
 const spotLink = spotsList();
 
 function SpotPlayerHeader({
@@ -75,11 +88,11 @@ function SpotPlayerHeader({
   const onMenuClick = async ({ key }: { key: string }) => {
     if (key === '1') {
       const { url } = await spotStore.getVideo(spotStore.currentSpot!.spotId);
-      await downloadFile(url, `${spotStore.currentSpot!.title}.webm`)
+      await downloadFile(url, `${spotStore.currentSpot!.title}.webm`);
     } else if (key === '2') {
       spotStore.deleteSpot([spotStore.currentSpot!.spotId]).then(() => {
         history.push(spotsList());
-        message.success('Spot deleted successfully'); 
+        message.success('Spot deleted successfully');
       });
     }
   };
@@ -185,26 +198,38 @@ function SpotPlayerHeader({
           />
         </>
       ) : null}
-      <Button
-        size={'small'}
-        disabled={activeTab === TABS.ACTIVITY}
-        onClick={() => setActiveTab(TABS.ACTIVITY)}
-        icon={<UserSwitchOutlined />}
-      >
-        Activity
-      </Button>
-      
-      <Button
-        size={'small'}
-        disabled={activeTab === TABS.COMMENTS}
-        onClick={() => setActiveTab(TABS.COMMENTS)}
-        icon={<CommentOutlined />}
-      >
-        Comments 
-        {comments.length > 0 && (
-          <Badge count={comments.length} className="mr-2" style={{ fontSize: '10px' }} size='small' color='#454545' />
-        )}
-      </Button>
+      <Tabs
+        className={'!w-fit !border-b-0'}
+        tabs={[
+          {
+            key: TABS.ACTIVITY,
+            text: 'Activity',
+            iconComp: <div className={'mr-1'}><UserSwitchOutlined /></div>,
+              },
+              {
+            key: TABS.COMMENTS,
+            iconComp: <div className={'mr-1'}><CommentOutlined /></div>,
+            text: (
+              <div>
+                Comments{' '}
+                {comments.length > 0 && (
+                  <Badge
+                    count={comments.length}
+                    className="mr-2"
+                    style={{ fontSize: '10px' }}
+                    size="small"
+                    color="#454545"
+                  />
+                )}
+              </div>
+            ),
+          },
+        ]}
+        active={activeTab}
+        onClick={(k) =>
+          k === activeTab ? setActiveTab(null) : setActiveTab(k)
+        }
+      />
     </div>
   );
 }