| 1 | import clsx from 'clsx'; |
| 2 | import Link from 'next/link'; |
| 3 | |
| 4 | export const TabNavItem = ({ |
| 5 | children, |
| 6 | href, |
| 7 | isActive, |
| 8 | }: { |
| 9 | children: React.ReactNode; |
| 10 | href: string; |
| 11 | isActive?: boolean; |
| 12 | }) => { |
| 13 | return ( |
| 14 | <Link |
| 15 | href={href} |
| 16 | className={clsx('rounded-lg px-3 py-1 text-sm font-medium', { |
| 17 | 'bg-gray-700 text-gray-100 hover:bg-gray-500 hover:text-white': |
| 18 | !isActive, |
| 19 | 'bg-vercel-blue text-white': isActive, |
| 20 | })} |
| 21 | > |
| 22 | {children} |
| 23 | </Link> |
| 24 | ); |
| 25 | }; |