fix: add href to tab items if they're set (#3527)

Author: omBratteng

packages/shared/src/components/header/FeedExploreHeader.tsx

@@ -94,7 +94,9 @@ export function FeedExploreHeader({
       >
         {isExtension ? (
           <TabList<ExploreTabs>
-            items={Object.values(ExploreTabs)}
+            items={Object.values(ExploreTabs).map((label) => ({
+              label,
+            }))}
             active={tab}
             onClick={setTab}
           />

packages/shared/src/components/tabs/TabContainer.tsx

@@ -140,7 +140,10 @@ export function TabContainer<T extends string = string>({
         )}
       >
         <TabList<T>
-          items={children.map((child) => child.props.label)}
+          items={children.map((child) => ({
+            label: child.props.label,
+            url: child.props?.url,
+          }))}
           renderTab={renderTab}
           onClick={onClick}
           active={currentActive}

packages/shared/src/components/tabs/TabList.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { RenderTab } from './common';
+import type { TabProps } from './TabContainer';
 
 export type AllowedTabTags = keyof Pick<JSX.IntrinsicElements, 'a' | 'button'>;
 
@@ -21,7 +22,7 @@ interface DimensionProps {
   indicatorOffset: number;
 }
 export interface TabListProps<T extends string = string> {
-  items: T[];
+  items: Pick<TabProps<T>, 'label' | 'url'>[];
   active: T;
   onClick?: (label: T) => unknown;
   className?: ClassName;
@@ -39,7 +40,8 @@ function TabList<T extends string = string>({
   renderTab,
   tag: Tag = 'button',
 }: TabListProps<T>): ReactElement {
-  const hasActive = items.includes(active);
+  const labels = items.map((item) => item.label);
+  const hasActive = labels.includes(active);
   const currentActiveTab = useRef<HTMLButtonElement>(null);
   const [dimensions, setDimensions] = useState<DimensionProps>({
     offset: 0,
@@ -104,22 +106,22 @@ function TabList<T extends string = string>({
 
   return (
     <ul className="relative flex flex-row">
-      {items.map((tab) => {
-        const isActive = tab === active;
-        const renderedTab = renderTab?.({ label: tab, isActive }) ?? (
+      {items.map(({ label, url: href }) => {
+        const isActive = label === active;
+        const renderedTab = renderTab?.({ label, isActive }) ?? (
           <span
             className={classNames(
               'inline rounded-10 px-3 py-1.5',
               isActive && 'bg-theme-active',
             )}
           >
-            {tab}
+            {label}
           </span>
         );
 
         return (
           <Tag
-            key={tab}
+            key={label}
             ref={(el) => {
               if (!el || !isActive) {
                 return;
@@ -133,11 +135,12 @@ function TabList<T extends string = string>({
               isActive ? '' : 'text-text-tertiary',
               isAnchor && 'cursor-pointer',
             )}
-            onClick={() => onClick(tab)}
+            onClick={() => onClick(label)}
             {...(isAnchor
               ? {
-                  'aria-label': tab,
-                  title: tab,
+                  'aria-label': label,
+                  title: label,
+                  ...(href ? { href } : {}),
                 }
               : { type: 'button', role: 'menuitem' })}
           >