diff --git a/packages/components/src/api/weights/GetWeightsByUser.ts b/packages/components/src/api/weights/GetWeightsByUser.ts index 27a01af151..d5121dfa4f 100644 --- a/packages/components/src/api/weights/GetWeightsByUser.ts +++ b/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({ +export const GetWeightsByUser = MakeRequest< + string, + UserWeightListRequest, + UserWeightListResponse, + UserWeightListQueries +>({ method: "GET", routingFunction: (userToken: string) => `/v1/weights/by_user/${userToken}`, -}); \ No newline at end of file +}); diff --git a/packages/fakeyou.com/src/components/common/Tabs/Tabs.scss b/packages/fakeyou.com/src/components/common/Tabs/Tabs.scss index 16337e6dd3..cf649e05fb 100644 --- a/packages/fakeyou.com/src/components/common/Tabs/Tabs.scss +++ b/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; + } } } diff --git a/packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx b/packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx index fec02649f1..e8600db91c 100644 --- a/packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx +++ b/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 (
  • {icon && } - {label} +
    + {label} + {numberCount && ( +
    {numberCount.toString() || "0"}
    + )} +
  • ); @@ -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}