27 lines
631 B
TypeScript
27 lines
631 B
TypeScript
import React, { PropsWithChildren } from "react";
|
|
import { Tab } from "@headlessui/react";
|
|
|
|
type ModeTabProps = {
|
|
disabled?: boolean | undefined;
|
|
};
|
|
|
|
const ModeTab: React.FC<PropsWithChildren<ModeTabProps>> = ({
|
|
disabled,
|
|
children,
|
|
}) => (
|
|
<Tab
|
|
className={({ selected }) =>
|
|
`border rounded-lg px-2 py-1 bg-gray-100 ${
|
|
disabled
|
|
? "border-gray-100 text-gray-300 cursor-default"
|
|
: "hover:bg-gray-200 hover:shadow text-gray-500 hover:text-gray-600"
|
|
} text-xs ${selected ? "border-blue-300" : ""}`
|
|
}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</Tab>
|
|
);
|
|
|
|
export default ModeTab;
|