"use client";
import React, { memo, useMemo } from "react";
import { cn } from "../../utils/cn";
import type { MarketType } from "../../types/common";
type MobileTab = "chart" | "orderbook" | "trade" | "orders" | "positions";
interface MobileTabBarProps {
activeTab: MobileTab;
onTabChange: (tab: MobileTab) => void;
marketType?: MarketType;
className?: string;
}
const ALL_TABS: { id: MobileTab; label: string; icon: React.ReactNode; futuresOnly?: boolean }[] = [
{
id: "chart",
label: "Chart",
icon: (
),
},
{
id: "orderbook",
label: "Orderbook",
icon: (
),
},
{
id: "trade",
label: "Trade",
icon: (
),
},
{
id: "orders",
label: "Orders",
icon: (
),
},
{
id: "positions",
label: "Positions",
futuresOnly: true,
icon: (
),
},
];
export const MobileTabBar = memo(function MobileTabBar({
activeTab,
onTabChange,
marketType = "spot",
className,
}: MobileTabBarProps) {
// Filter tabs based on market type
const tabs = useMemo(() => {
return ALL_TABS.filter(tab => {
// Show positions only for futures
if (tab.futuresOnly && marketType !== "futures") {
return false;
}
return true;
});
}, [marketType]);
return (
);
});
export default MobileTabBar;