64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { JSX } from 'solid-js';
|
|
|
|
interface StatusBadgeProps {
|
|
isEnabled: boolean;
|
|
disabled?: boolean;
|
|
size?: 'sm' | 'md';
|
|
onToggle?: () => void;
|
|
labelEnabled?: string;
|
|
labelDisabled?: string;
|
|
titleEnabled?: string;
|
|
titleDisabled?: string;
|
|
titleWhenDisabled?: string;
|
|
}
|
|
|
|
/**
|
|
* StatusBadge - A shared component for enabled/disabled status badges
|
|
* Used throughout the app for consistent styling of status indicators
|
|
*/
|
|
export function StatusBadge(props: StatusBadgeProps): JSX.Element {
|
|
const {
|
|
isEnabled,
|
|
disabled = false,
|
|
size = 'sm',
|
|
onToggle,
|
|
labelEnabled = 'Enabled',
|
|
labelDisabled = 'Disabled',
|
|
titleEnabled,
|
|
titleDisabled,
|
|
titleWhenDisabled,
|
|
} = props;
|
|
|
|
const basePadding = size === 'md' ? 'px-2.5 py-1' : 'px-2 py-0.5';
|
|
const baseClasses = `inline-flex items-center justify-center ${basePadding} text-xs font-medium rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-400`;
|
|
const stateClasses = isEnabled
|
|
? 'bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-500/20 dark:text-blue-300 dark:hover:bg-blue-500/30'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600';
|
|
const disabledClasses = disabled
|
|
? 'opacity-60 cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent'
|
|
: '';
|
|
|
|
const title = disabled
|
|
? titleWhenDisabled ?? titleDisabled ?? titleEnabled ?? ''
|
|
: isEnabled
|
|
? titleEnabled ?? ''
|
|
: titleDisabled ?? '';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
class={`${baseClasses} ${stateClasses} ${disabledClasses}`.trim()}
|
|
onClick={() => {
|
|
if (disabled) return;
|
|
onToggle?.();
|
|
}}
|
|
disabled={disabled}
|
|
aria-pressed={isEnabled}
|
|
title={title}
|
|
>
|
|
{isEnabled ? labelEnabled : labelDisabled}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default StatusBadge;
|