09735375c2
- First-visit language auto-detect (Spanish devices land in es; stored choice wins). - Sasquatch AI replies in the app language (skate trick names kept English). - i18n safety net: scripts/check-i18n.mjs wired into npm test — fails on any t() key missing from en/es or any en/es key drift. - ~1,680 new keys (2,297 total) across mapUi / spotUi / marketUi / labUi and ~65 files wired to t(): Map, spots (detail/create/edit/chat), marketplace, trades, offers, escrow, shipping, The Lab, /become/* forms, coaches, skaters. - Policy: only skate TRICK names stay English; user-generated content untouched.
87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { Store, Handshake, Star, Package } from 'lucide-react';
|
|
import GearSwapPage from '@/pages/GearSwapPage';
|
|
import TradesPage from '@/pages/TradesPage';
|
|
import { TradeReputationPanel } from '@/components/TradeReputationPanel';
|
|
import { SellerDashboard } from '@/components/SellerDashboard';
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { LoginArea } from '@/components/auth/LoginArea';
|
|
import { cn } from '@/lib/utils';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
const TABS = [
|
|
{ id: 'browse', labelKey: 'marketUi.hub.browse', icon: Store },
|
|
{ id: 'selling', labelKey: 'marketUi.hub.selling', icon: Package },
|
|
{ id: 'trades', labelKey: 'marketUi.hub.myTrades', icon: Handshake },
|
|
{ id: 'reputation', labelKey: 'marketUi.hub.reputation', icon: Star },
|
|
] as const;
|
|
|
|
type TabId = (typeof TABS)[number]['id'];
|
|
|
|
/**
|
|
* Marketplace hub — one home for buying/selling: the gear grid, your trades and
|
|
* your reputation/reviews, as tabs. `/trades` and `/listing/...` deep links keep
|
|
* working; this is just the front door.
|
|
*/
|
|
export default function MarketplaceHubPage() {
|
|
const { t } = useTranslation();
|
|
const { user } = useCurrentUser();
|
|
const [tab, setTab] = useState<TabId>('browse');
|
|
|
|
return (
|
|
<>
|
|
{/* Tab bar — sticky under the app header, like other toolbars. */}
|
|
<div className="sticky top-14 z-30 border-b border-white/5 bg-black/95 backdrop-blur md:top-16">
|
|
<div className="container max-w-7xl px-4">
|
|
<div className="scroll-container flex gap-1 overflow-x-auto py-2">
|
|
{TABS.map(({ id, labelKey, icon: Icon }) => {
|
|
const active = tab === id;
|
|
return (
|
|
<button
|
|
key={id}
|
|
type="button"
|
|
onClick={() => setTab(id)}
|
|
aria-pressed={active}
|
|
className={cn(
|
|
'flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wide transition-colors',
|
|
active ? 'bg-[#ccff00] text-black' : 'text-gray-400 hover:bg-white/5 hover:text-white',
|
|
)}
|
|
>
|
|
<Icon className="h-3.5 w-3.5" />
|
|
{t(labelKey)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{tab === 'browse' && <GearSwapPage />}
|
|
{tab === 'selling' && (
|
|
<div className="container mx-auto max-w-3xl px-4 py-8">
|
|
{user ? (
|
|
<SellerDashboard />
|
|
) : (
|
|
<div className="space-y-4 py-16 text-center">
|
|
<p className="text-gray-400">{t('marketUi.hub.loginListings')}</p>
|
|
<LoginArea className="justify-center" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{tab === 'trades' && <TradesPage />}
|
|
{tab === 'reputation' && (
|
|
<div className="container mx-auto max-w-3xl px-4 py-8">
|
|
{user ? (
|
|
<TradeReputationPanel pubkey={user.pubkey} />
|
|
) : (
|
|
<div className="space-y-4 py-16 text-center">
|
|
<p className="text-gray-400">{t('marketUi.hub.loginReputation')}</p>
|
|
<LoginArea className="justify-center" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|