Spaces:
Running
Running
File size: 2,125 Bytes
370c714 8dad39c 370c714 8dad39c 370c714 8dad39c 370c714 68ff2ab 8dad39c 370c714 68ff2ab |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React from 'react';
import { ShoppingBag, ChevronLeft, Zap, BatteryLow, BatteryFull } from 'lucide-react';
import { APP_NAME } from '../constants';
interface NavigationProps {
onBack?: () => void;
showBack: boolean;
cooldown?: number;
}
const Navigation: React.FC<NavigationProps> = ({ onBack, showBack, cooldown = 0 }) => {
return (
<nav className="sticky top-0 z-50 bg-white border-b border-gray-100 shadow-sm h-16 flex items-center px-4 justify-between">
<div className="flex items-center gap-2">
{showBack && (
<button
onClick={onBack}
className="p-2 hover:bg-gray-100 rounded-full transition-colors mr-1"
>
<ChevronLeft className="w-6 h-6 text-gray-700" />
</button>
)}
<div className="flex items-center gap-2">
<div className="bg-brand-600 p-1.5 rounded-lg">
<ShoppingBag className="w-5 h-5 text-white" />
</div>
<span className="font-bold text-xl tracking-tight text-gray-900">{APP_NAME}</span>
</div>
</div>
<div className="flex items-center gap-4">
{cooldown > 0 ? (
<div className="flex items-center gap-2 px-3 py-1.5 bg-amber-50 rounded-full border border-amber-100">
<BatteryLow className="w-3 h-3 text-amber-500" />
<span className="text-[10px] font-bold text-amber-600 uppercase tracking-tighter">Cooling {cooldown}s</span>
</div>
) : (
<div className="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 rounded-full border border-emerald-100">
<BatteryFull className="w-3 h-3 text-emerald-500" />
<span className="text-[10px] font-bold text-emerald-600 uppercase tracking-tighter">Ready</span>
</div>
)}
<div className="w-8 h-8 bg-gray-200 rounded-full overflow-hidden border border-gray-300">
<img src="https://picsum.photos/100/100" alt="Profile" className="w-full h-full object-cover" />
</div>
</div>
</nav>
);
};
export default Navigation; |