34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { TAB_ORDER } from "../constants";
|
|
import type { MatchIntent } from "../types";
|
|
|
|
interface IntentTabsProps {
|
|
activeTab: MatchIntent;
|
|
onChange: (tab: MatchIntent) => void;
|
|
t: (key: string) => string;
|
|
}
|
|
|
|
export default function IntentTabs({ activeTab, onChange, t }: IntentTabsProps) {
|
|
return (
|
|
<div className="flex justify-center pt-6 pb-3 px-4">
|
|
<div className="flex max-w-3xl flex-wrap justify-center gap-2">
|
|
{TAB_ORDER.map((tab) => (
|
|
<button
|
|
key={tab}
|
|
type="button"
|
|
onClick={() => onChange(tab)}
|
|
className={`rounded-full px-4 py-2 text-xs font-medium transition-all duration-200 sm:text-sm ${
|
|
activeTab === tab
|
|
? "bg-[#ff4d4f] text-white shadow-sm"
|
|
: "border border-gray-100 bg-white text-gray-600 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
|
|
}`}
|
|
>
|
|
{t(tab)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|