tabs to support weight count/media count in the future

packages/components/src/api/weights/GetWeightsByUser.ts

@@ -5,15 +5,20 @@ export interface UserWeightListRequest {}
 
 export interface UserWeightListResponse {
   // pagination: Pagination,
-  success: boolean,
-  weights: any
+  success: boolean;
+  results: any;
 }
 
 export interface UserWeightListQueries {
-  page_index: number,
+  page_index: number;
 }
 
-export const GetWeightsByUser = MakeRequest<string, UserWeightListRequest, UserWeightListResponse, UserWeightListQueries>({
+export const GetWeightsByUser = MakeRequest<
+  string,
+  UserWeightListRequest,
+  UserWeightListResponse,
+  UserWeightListQueries
+>({
   method: "GET",
   routingFunction: (userToken: string) => `/v1/weights/by_user/${userToken}`,
-});
+});

packages/fakeyou.com/src/components/common/Tabs/Tabs.scss

@@ -2,6 +2,10 @@
 
 .nav-tabs {
   border-bottom: 2px solid #ffffff15;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
 
   .nav-link {
     border: none;
@@ -33,9 +37,21 @@
       border-bottom: 4px solid $primary !important;
     }
 
-    &.disabled{
+    &.disabled {
       color: rgba($white, 0.5) !important;
       pointer-events: none;
     }
+
+    .number-count {
+      display: flex;
+      align-items: center;
+      padding: 0px 8px;
+      margin: 0;
+      border-radius: 0.25rem;
+      background-color: $secondary;
+      font-size: 14px;
+      font-weight: 500;
+      color: rgba($white, 0.75) !important;
+    }
   }
 }

packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx

@@ -8,10 +8,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 interface TabProps {
   to: string;
   label: string;
+  numberCount?: number;
   content?: React.ReactNode;
   icon?: IconDefinition;
   padding?: boolean;
-  disabled?:boolean;
+  disabled?: boolean;
 }
 
 interface TabsProps {
@@ -24,17 +25,29 @@ interface TabContentProps {
   padding?: boolean;
 }
 
-function Tab({ to, label, icon, onClick, disabled }: TabProps & { onClick: () => void }) {
+function Tab({
+  to,
+  label,
+  numberCount,
+  icon,
+  onClick,
+  disabled,
+}: TabProps & { onClick: () => void }) {
   return (
     <li className="nav-item">
       <NavLink
         to={to}
-        className={"nav-link fs-6 px-3 px-lg-4" + (disabled?" disabled":"")}
+        className={"nav-link fs-6 px-3 px-lg-4" + (disabled ? " disabled" : "")}
         activeClassName="active"
         onClick={onClick}
       >
         {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
-        {label}
+        <div className="d-flex gap-2">
+          {label}
+          {numberCount && (
+            <div className="number-count">{numberCount.toString() || "0"}</div>
+          )}
+        </div>
       </NavLink>
     </li>
   );
@@ -83,6 +96,7 @@ function Tabs({ tabs, disabled }: TabsProps) {
             key={tab.to}
             to={tab.to}
             label={tab.label}
+            numberCount={tab.numberCount}
             onClick={() => handleTabClick(tab.to)}
             icon={tab.icon}
             disabled={disabled || tab.disabled}