Jean-Luc Makiola
9bcdcc7168
Switch all interactive UI elements (buttons, focus rings, active tabs, FAB, links, spinners) from blue to gray to match icon colors for a more cohesive look. Mute card badge text colors to pastels (blue-400, green-500, purple-500) to keep the focus on card content. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
34 lines
831 B
TypeScript
34 lines
831 B
TypeScript
interface ThreadTabsProps {
|
|
active: "gear" | "planning";
|
|
onChange: (tab: "gear" | "planning") => void;
|
|
}
|
|
|
|
const tabs = [
|
|
{ key: "gear" as const, label: "My Gear" },
|
|
{ key: "planning" as const, label: "Planning" },
|
|
];
|
|
|
|
export function ThreadTabs({ active, onChange }: ThreadTabsProps) {
|
|
return (
|
|
<div className="flex border-b border-gray-200">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
type="button"
|
|
onClick={() => onChange(tab.key)}
|
|
className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
|
|
active === tab.key
|
|
? "text-gray-700"
|
|
: "text-gray-500 hover:text-gray-700"
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
{active === tab.key && (
|
|
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-700 rounded-t" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|