| 1 | 'use client'; |
| 2 | |
| 3 | import type { Item } from '#/ui/tab-group'; |
| 4 | import clsx from 'clsx'; |
| 5 | import Link from 'next/link'; |
| 6 | import { useSelectedLayoutSegment } from 'next/navigation'; |
| 7 | |
| 8 | export const Tab = ({ |
| 9 | path, |
| 10 | parallelRoutesKey, |
| 11 | item, |
| 12 | }: { |
| 13 | path: string; |
| 14 | parallelRoutesKey?: string; |
| 15 | item: Item; |
| 16 | }) => { |
| 17 | const segment = useSelectedLayoutSegment(parallelRoutesKey); |
| 18 | |
| 19 | const href = item.slug ? path + '/' + item.slug : path; |
| 20 | const isActive = |
| 21 | // Example home pages e.g. `/layouts` |
| 22 | (!item.slug && segment === null) || |
| 23 | segment === item.segment || |
| 24 | // Nested pages e.g. `/layouts/electronics` |
| 25 | segment === item.slug; |
| 26 | |
| 27 | return ( |
| 28 | <Link |
| 29 | href={href} |
| 30 | className={clsx('rounded-lg px-3 py-1 text-sm font-medium', { |
| 31 | 'bg-gray-700 text-gray-100 hover:bg-gray-500 hover:text-white': |
| 32 | !isActive, |
| 33 | 'bg-vercel-blue text-white': isActive, |
| 34 | })} |
| 35 | > |
| 36 | {item.text} |
| 37 | </Link> |
| 38 | ); |
| 39 | }; |