File size: 3,564 Bytes
ab420b2 84ca4b1 ab420b2 480db82 8d2acd1 ab420b2 480db82 ab420b2 97b08c9 ab420b2 480db82 ab420b2 480db82 ab420b2 | 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Zap } from 'lucide-react';
import { Button } from "@/components/ui/button";
const MENU_ITEMS = [
{ label: 'Campaigns', href: '/' },
{ label: 'Contacts', href: '/contacts' },
{ label: 'Leads', href: '/leads' },
{ label: 'Deals', href: '/deals' },
];
function pathMatches(locationPath, href) {
if (href === '/') return locationPath === '/';
return locationPath === href || locationPath.startsWith(`${href}/`);
}
export default function AppHeader({ rightContent }) {
const location = useLocation();
return (
<header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50">
<div className="mx-auto w-full max-w-none px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-4">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-6">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200">
<Zap className="h-5 w-5 text-white" />
</div>
<div>
<h1 className="font-bold text-slate-800 text-lg">SequenceAI</h1>
<p className="text-xs text-slate-500">Personalized Email Outreach</p>
</div>
</div>
<nav className="hidden md:flex items-center gap-2">
{MENU_ITEMS.map((item) => {
const isActive = pathMatches(location.pathname, item.href);
return (
<Button
key={item.href}
asChild
variant={isActive ? "default" : "ghost"}
size="sm"
className={isActive ? "bg-violet-600 hover:bg-violet-700" : "text-slate-600"}
>
<Link to={item.href}>{item.label}</Link>
</Button>
);
})}
</nav>
</div>
<div className="flex items-center gap-2">
{rightContent}
</div>
</div>
<nav className="md:hidden flex items-center gap-2 mt-3">
{MENU_ITEMS.map((item) => {
const isActive = pathMatches(location.pathname, item.href);
return (
<Button
key={item.href}
asChild
variant={isActive ? "default" : "outline"}
size="sm"
className={isActive ? "bg-violet-600 hover:bg-violet-700" : ""}
>
<Link to={item.href}>{item.label}</Link>
</Button>
);
})}
</nav>
</div>
</header>
);
}
|