forked from Tadrisino/MathApp_frontend
AliReza
f8cf86e4e8
- muted text #9e9ec0 -> #727299 (contrast 2.6 -> 4.5 on white); tab labels 11px - map: chapter titles wrap to two lines instead of being cut off - reduced-motion respected (MotionConfig + CSS), focus-visible ring, no pull-to-refresh, short vibration on correct/wrong answers - src/lib/bazaar.ts: bridge to the Android WebView wrapper; checkout uses Bazaar IAP only inside that app, Zarinpal everywhere else (unchanged) - android/: WebView wrapper with Poolakey; written but never built Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import { Brain, ShoppingBag, Home, Map, UserRound, type LucideIcon } from 'lucide-react';
|
|
import type { TabName } from '@/nav/routes';
|
|
|
|
const ITEMS: { id: TabName; icon: LucideIcon; label: string }[] = [
|
|
{ id: 'home', icon: Home, label: 'خانه' },
|
|
{ id: 'map', icon: Map, label: 'نقشه' },
|
|
{ id: 'ask', icon: Brain, label: 'دستیار' },
|
|
{ id: 'subscription', icon: ShoppingBag, label: 'بستهها' },
|
|
{ id: 'profile', icon: UserRound, label: 'من' },
|
|
];
|
|
|
|
export function BottomNav({ active, onChange }: { active: TabName | null; onChange: (tab: TabName) => void }) {
|
|
return (
|
|
<nav className="flex flex-shrink-0 items-center justify-around border-t border-line bg-white px-2 pb-safe pt-1.5">
|
|
{ITEMS.map(({ id, icon: Icon, label }) => {
|
|
const on = active === id;
|
|
return (
|
|
<button
|
|
key={id}
|
|
type="button"
|
|
onClick={() => onChange(id)}
|
|
aria-current={on ? 'page' : undefined}
|
|
className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-colors ${on ? 'text-coral' : 'text-muted'}`}
|
|
>
|
|
<span className={`rounded-xl p-1.5 transition-colors ${on ? 'bg-[#fde9e5]' : ''}`}>
|
|
<Icon size={20} strokeWidth={on ? 2.5 : 1.9} />
|
|
</span>
|
|
<span className="text-[11px] font-bold">{label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|