44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
/**
|
|
* @component TopBar
|
|
* @purpose Clean top bar matching Screenshot 1 with Track Order, About Us, Blog, Contact Us, FAQs, and Free Shipping notification.
|
|
*/
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { Truck } from 'lucide-react';
|
|
|
|
export function TopBar() {
|
|
return (
|
|
<div className="w-full bg-white text-[#555555] text-xs py-2 px-4 border-b border-gray-100">
|
|
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
|
{/* Left Nav Links */}
|
|
<div className="flex items-center gap-4 sm:gap-6 font-medium text-[11px]">
|
|
<Link href="/account/orders" className="hover:text-[#1877f2] transition-colors flex items-center gap-1">
|
|
<Truck className="w-3.5 h-3.5 text-[#1877f2]" /> Track Order
|
|
</Link>
|
|
<span className="text-gray-300">|</span>
|
|
<Link href="/about" className="hover:text-[#1877f2] transition-colors">
|
|
About Us
|
|
</Link>
|
|
<span className="text-gray-300">|</span>
|
|
<Link href="/blog" className="hover:text-[#1877f2] transition-colors">
|
|
Blog
|
|
</Link>
|
|
<span className="text-gray-300">|</span>
|
|
<Link href="/contact" className="hover:text-[#1877f2] transition-colors">
|
|
Contact Us
|
|
</Link>
|
|
<span className="text-gray-300">|</span>
|
|
<Link href="/faqs" className="hover:text-[#1877f2] transition-colors">
|
|
FAQs
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Right Free Shipping Text */}
|
|
<div className="hidden md:flex items-center gap-1.5 text-[11px] font-semibold text-gray-700">
|
|
<span>Free Shipping on orders over ₹999!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|