Replaced older tab implementation in trending channels with the new tab block component

src/modules/dashboard/Dashboard.constants.ts

@@ -1,14 +1,6 @@
-//Components
 import { PushAlpha, PushBot, PushDev } from 'blocks';
 
-//Types
-import { ChatType, DashboardChannelTabsType, EnvKeys, SourceKeys } from './Dashboard.types';
-
-export const dahboardChannelTabs: DashboardChannelTabsType = [
-  { label: 'Trending Channels', value: 'trending' },
-  { label: 'Hottest Channels', value: 'hottest' },
-  { label: 'Subscribed', value: 'subscribed' },
-];
+import { ChatType, EnvKeys, SourceKeys } from './Dashboard.types';
 
 export const recommendedChatList: ChatType[] = [
   {

src/modules/dashboard/Dashboard.types.ts

@@ -4,7 +4,7 @@ import { FC } from 'react';
 export type ChannelTabs = 'subscribed' | 'trending' | 'hottest';
 export type DashboardChannelTabType = {
   label: string;
-  value: ChannelTabs;
+  key: ChannelTabs;
 };
 export type DashboardChannelTabsType = Array<DashboardChannelTabType>;
 export type TrendingChannelsType = {

src/modules/dashboard/Dashboard.utils.ts

@@ -1,6 +1,7 @@
 import { TrendingChannelsResponse } from 'queries/types';
 import { TrendingChannelsType } from './Dashboard.types';
 
+
 /**
  * @param weekData
  * @param currentData
@@ -54,7 +55,7 @@ export const getTrendingChannelsData = (
       subscriber: currentSubscriberData[key],
       name: channelDetails[key]?.name || '',
       icon: channelDetails[key]?.icon || '',
-      trend: trend
+      trend: trend,
     });
   }
 

src/modules/dashboard/components/ChannelTabsSection.tsx

@@ -1,16 +1,73 @@
 import { useEffect, useState } from 'react';
-import { css } from 'styled-components';
 
-import { Box, Text } from 'blocks';
+import { Box, TabItem, Tabs } from 'blocks';
+
 import { useAccount } from 'hooks';
+
 import { ChannelTabs } from '../Dashboard.types';
+
+import { HottestChannelsList } from './HottestChannelsList';
 import { TrendingChannelsList } from './TrendingChannelsList';
 import { SubscribedChannelsList } from './SubscribedChannelsList';
-import { dahboardChannelTabs } from '../Dashboard.constants';
-import { HottestChannelsList } from './HottestChannelsList';
 
 const ChannelTabsSection = () => {
-  const [selectedChannelTab, setSelectedChannelTab] = useState<ChannelTabs>(dahboardChannelTabs[0].value);
+  const dashboardChannelTabs: TabItem[] = [
+    {
+      label: 'Trending Channels',
+      key: 'trending',
+      children: (
+        <Box
+          display="flex"
+          flexDirection="column"
+          overflow="hidden auto"
+          borderRadius="radius-md"
+          minHeight="285px"
+          maxHeight="285px"
+          border="border-sm solid stroke-secondary"
+          padding="spacing-xxs spacing-sm"
+        >
+          <TrendingChannelsList />
+        </Box>
+      ),
+    },
+    {
+      label: 'Hottest Channels',
+      key: 'hottest',
+      children: (
+        <Box
+          display="flex"
+          flexDirection="column"
+          overflow="hidden auto"
+          borderRadius="radius-md"
+          minHeight="285px"
+          maxHeight="285px"
+          border="border-sm solid stroke-secondary"
+          padding="spacing-xxs spacing-sm"
+        >
+          <HottestChannelsList />
+        </Box>
+      ),
+    },
+    {
+      label: 'Subscribed',
+      key: 'subscribed',
+      children: (
+        <Box
+          display="flex"
+          flexDirection="column"
+          overflow="hidden auto"
+          borderRadius="radius-md"
+          minHeight="285px"
+          maxHeight="285px"
+          border="border-sm solid stroke-secondary"
+          padding="spacing-xxs spacing-sm"
+        >
+          <SubscribedChannelsList />
+        </Box>
+      ),
+    },
+  ];
+  const [selectedChannelTab, setSelectedChannelTab] = useState<ChannelTabs>(dashboardChannelTabs[0].key as ChannelTabs);
   const { wallet } = useAccount();
 
   const isWalletConnected = !!wallet?.accounts?.length;
@@ -25,75 +82,25 @@ const ChannelTabsSection = () => {
     }
   }, [isWalletConnected]);
 
+  const getUpdatedDashboardTabs = (dashboardChannelTabs: TabItem[], isWalletConnected: boolean): TabItem[] => {
+    if (!isWalletConnected) return dashboardChannelTabs.filter((tabs) => tabs.key !== 'subscribed');
+
+    if (isWalletConnected) return dashboardChannelTabs.filter((tabs) => tabs.key !== 'hottest');
+    return dashboardChannelTabs;
+  };
+
   return (
     <Box
       display="flex"
       flexDirection="column"
       width={{ ml: '100%', initial: '50%' }}
-      gap="spacing-sm"
     >
-      <Box width="100%">
-        {/* TODO: Use Tabs component here */}
-        <Box
-          backgroundColor="surface-secondary"
-          cursor="pointer"
-          display="flex"
-          gap="spacing-xxxs"
-          padding="spacing-xxxs"
-          height="fit-content"
-          justifyContent="space-between"
-          borderRadius="radius-sm"
-          width={{ lp: 'auto', initial: 'fit-content' }}
-        >
-          {dahboardChannelTabs?.map((channelTab, index) => {
-            if (channelTab.value === 'subscribed' && !isWalletConnected) return null;
-
-            if (channelTab.value === 'hottest' && isWalletConnected) return null;
-
-            return (
-              <Box
-                key={`${index}`}
-                display="flex"
-                justifyContent="center"
-                width={{ ll: '100%' }}
-                alignItems="center"
-                padding="spacing-xxs spacing-xs"
-                borderRadius="radius-sm"
-                onClick={() => setSelectedChannelTab(channelTab.value)}
-                css={css`
-                  background-color: var(
-                    --${selectedChannelTab === channelTab.value ? 'components-button-tertiary-background-inverse' : 'surface-transparent'}
-                  );
-                `}
-              >
-                <Text
-                  variant="h5-semibold"
-                  ellipsis={true}
-                  css={css`
-                    color: var(--components-button-secondary-text-default);
-                  `}
-                >
-                  {channelTab?.label}
-                </Text>
-              </Box>
-            );
-          })}
-        </Box>
-      </Box>
-      <Box
-        display="flex"
-        flexDirection="column"
-        overflow="hidden auto"
-        borderRadius="radius-md"
-        minHeight="285px"
-        maxHeight="285px"
-        border="border-sm solid stroke-secondary"
-        padding="spacing-xxs spacing-sm"
-      >
-        {selectedChannelTab === 'trending' && <TrendingChannelsList />}
-        {selectedChannelTab === 'subscribed' && <SubscribedChannelsList />}
-        {selectedChannelTab === 'hottest' && <HottestChannelsList />}
-      </Box>
+      <Tabs
+        items={getUpdatedDashboardTabs(dashboardChannelTabs, isWalletConnected)}
+        activeKey={selectedChannelTab}
+        variant="fill"
+        onChange={(activeKey) => setSelectedChannelTab(activeKey as ChannelTabs)}
+      />
     </Box>
   );
 };