Spaces:
Running
Running
File size: 2,574 Bytes
e4f1db2 |
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 |
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { BarChart3, Search, Calendar, Map } from 'lucide-react';
const Navbar: React.FC = () => {
const location = useLocation();
return (
<nav className="bg-white shadow-lg">
<div className="container mx-auto px-4">
<div className="flex justify-between h-16">
<div className="flex items-center">
<Link to="/" className="flex items-center space-x-2">
<BarChart3 className="h-8 w-8 text-blue-600" />
<span className="text-xl font-bold text-gray-900">PubMed AI Explorer</span>
</Link>
</div>
<div className="flex items-center space-x-4">
<Link
to="/"
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium ${
location.pathname === '/'
? 'bg-blue-100 text-blue-700'
: 'text-gray-500 hover:text-gray-700'
}`}
>
<BarChart3 className="h-4 w-4" />
<span>Dashboard</span>
</Link>
<Link
to="/search"
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium ${
location.pathname === '/search'
? 'bg-blue-100 text-blue-700'
: 'text-gray-500 hover:text-gray-700'
}`}
>
<Search className="h-4 w-4" />
<span>Search</span>
</Link>
<Link
to="/timeline"
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium ${
location.pathname === '/timeline'
? 'bg-blue-100 text-blue-700'
: 'text-gray-500 hover:text-gray-700'
}`}
>
<Calendar className="h-4 w-4" />
<span>Timeline</span>
</Link>
<Link
to="/roadmap"
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium ${
location.pathname === '/roadmap'
? 'bg-blue-100 text-blue-700'
: 'text-gray-500 hover:text-gray-700'
}`}
>
<Map className="h-4 w-4" />
<span>Roadmap</span>
</Link>
</div>
</div>
</div>
</nav>
);
};
export default Navbar; |