91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import Image from 'next/image';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Bell, Heart, ShoppingCart, SquarePen } from 'lucide-react';
|
|
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
function MarketplaceNavbar() {
|
|
return (
|
|
<nav className="w-full h-[56px] bg-[#010313] flex items-center px-20 justify-between">
|
|
{/* Logo and Brand */}
|
|
<div className="flex items-center gap-2 min-w-[180px]">
|
|
<Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
|
|
<span className="text-white text-2xl ml-1 font-normal">Woedii</span>
|
|
</div>
|
|
{/* Search Bar */}
|
|
<div className="flex-1 flex justify-center">
|
|
<div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}>
|
|
<svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
|
|
<Input
|
|
type="text"
|
|
placeholder="Search images, videos, fonts, graphics and more"
|
|
className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
|
|
style={{ height: 40 }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* Right Side Icons and Profile */}
|
|
<div className="flex items-center gap-8 min-w-[420px] justify-end">
|
|
{/* Notifications */}
|
|
<div className="relative cursor-pointer flex flex-col items-center justify-center">
|
|
<div className="relative flex items-center justify-center">
|
|
<Bell size={22} className="text-white" />
|
|
<span className="absolute -top-1 -right-1 w-[9px] h-[9px] bg-[#FF3B30] rounded-full border-[1.5px] border-[#020316]" />
|
|
</div>
|
|
<span className="text-xs text-white mt-1">Notifications</span>
|
|
</div>
|
|
{/* Favorites */}
|
|
<div className="cursor-pointer flex flex-col items-center justify-center">
|
|
<Heart size={22} className="text-white" />
|
|
<span className="text-xs text-white mt-1">Favorites</span>
|
|
</div>
|
|
{/* Cart */}
|
|
<div className="cursor-pointer flex flex-col items-center justify-center">
|
|
<ShoppingCart size={22} className="text-white" />
|
|
<span className="text-xs text-white mt-1">Cart</span>
|
|
</div>
|
|
{/* Profile */}
|
|
<div className="cursor-pointer flex flex-col items-center justify-center">
|
|
<div className="flex items-center justify-center">
|
|
<Avatar className="w-6 h-6">
|
|
<AvatarImage src="/avatar.png" alt="Profile" />
|
|
<AvatarFallback>U</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
<span className="text-xs text-white mt-1">My Profile</span>
|
|
</div>
|
|
{/* Create Button */}
|
|
<a href="/creator">
|
|
<Button className="flex items-center gap-2 bg-[#0093A5] text-white px-5 py-2 rounded-lg font-medium text-base transition-colors ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
|
|
<SquarePen size={18} />
|
|
Create
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
function MarketplaceSecondaryMenu() {
|
|
return (
|
|
<div className="w-full bg-[#010313] flex items-center px-20 h-7 border-t border-white/20 p-5">
|
|
<ul className="flex gap-10 text-white text-sm font-normal">
|
|
<li className="cursor-pointer">Images</li>
|
|
<li className="cursor-pointer">Videos</li>
|
|
<li className="cursor-pointer">Audios</li>
|
|
<li className="cursor-pointer">Gifs</li>
|
|
<li className="cursor-pointer">Fonts</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function MarketplaceNavbarWithMenu() {
|
|
return (
|
|
<>
|
|
<MarketplaceNavbar />
|
|
<MarketplaceSecondaryMenu />
|
|
</>
|
|
);
|
|
}
|