feat: show social media icon on tab (#620)

* feat: show social media icon on tab * fix: tab gap --------- Co-authored-by: juliaM <[email protected]>
devhatt · Sep 17, 2024 · 687ad37 · 687ad37
1 parent ab9ef82
commit 687ad37
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/Tabber/Tabs/Tabs.module.scss b/src/components/Tabber/Tabs/Tabs.module.scss
@@ -56,7 +56,7 @@
 .tab {
   display: grid;
   grid-template-columns: minmax(min-content, max-content) auto;
-  gap: 0.5rem;
+  gap: 0.8rem;
 
   align-items: center;
 

diff --git a/src/components/Tabber/Tabs/Tabs.tsx b/src/components/Tabber/Tabs/Tabs.tsx
@@ -6,6 +6,7 @@ import { useHorizontalScroll } from '~hooks/useHorizontalScroll/useHorizontalScr
 import { Account } from '~services/api/accounts/accounts.types';
 import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
 
+import Icon from '~components/Icon/Icon';
 import scss from '~components/Tabber/Tabs/Tabs.module.scss';
 
 import { Tab, TabId } from '../Tabber.types';
@@ -25,8 +26,12 @@ function Tabs(props: TabsProps): ReactNode {
   const tabClasses = (id: TabId): string =>
     classNames(scss.tab, id === props.currentTab.id && scss.active);
 
-  const renderSocialMediaIcon = (account: Account): ReactNode =>
-    socialMedias.get(account.socialMediaId)?.icon;
+  const renderSocialMediaIcon = (account: Account): ReactNode => (
+    <Icon
+      icon={socialMedias.get(account.socialMediaId)?.icon ?? 'alert'}
+      size={20}
+    />
+  );
 
   const handleTabClick = (
     tab: Tab,