72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* ProfileTabs — Instagram-style icon tab strip used under ProfileHeader.
|
|
*
|
|
* Renders a horizontal row of equal-width icon tabs. The active tab gets
|
|
* a top-border indicator and stronger color. Labels are screen-reader
|
|
* only by default (Instagram pattern), but a `showLabels` prop opts them
|
|
* back in for surfaces with more real estate.
|
|
*/
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type ProfileTab = {
|
|
href: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
/** Additional pathnames that should mark this tab active. Used to keep
|
|
* the Posts tab lit while the user is on the scroll feed at
|
|
* /u/<handle>/posts (a sibling route to /u/<handle>). */
|
|
activeFor?: string[];
|
|
};
|
|
|
|
export function ProfileTabs({
|
|
tabs,
|
|
showLabels = false,
|
|
}: {
|
|
tabs: ProfileTab[];
|
|
showLabels?: boolean;
|
|
}) {
|
|
const pathname = usePathname();
|
|
return (
|
|
<nav aria-label="Profile sections" className="border-b border-border">
|
|
<ul className="flex items-stretch max-w-md mx-auto">
|
|
{tabs.map((tab) => {
|
|
const active =
|
|
pathname === tab.href ||
|
|
(tab.activeFor?.includes(pathname) ?? false);
|
|
return (
|
|
<li key={tab.href} className="flex-1">
|
|
<Link
|
|
href={tab.href}
|
|
aria-current={active ? "page" : undefined}
|
|
title={tab.label}
|
|
className={cn(
|
|
"h-12 -mb-px flex items-center justify-center gap-2 border-b-2",
|
|
active
|
|
? "border-foreground text-foreground"
|
|
: "border-transparent text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
<span>{tab.icon}</span>
|
|
<span
|
|
className={cn(
|
|
"text-[0.65rem] uppercase tracking-[0.2em] font-semibold",
|
|
showLabels ? "" : "sr-only",
|
|
)}
|
|
>
|
|
{tab.label}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|
|
|