diff --git a/ui/src/components/SettingsItem.tsx b/ui/src/components/SettingsItem.tsx index e2cd9489d..f37c554a5 100644 --- a/ui/src/components/SettingsItem.tsx +++ b/ui/src/components/SettingsItem.tsx @@ -5,13 +5,22 @@ interface SettingsItemProps { readonly title: string; readonly description: string | React.ReactNode; readonly badge?: string; + readonly badgeTheme?: keyof typeof badgeTheme; readonly className?: string; readonly loading?: boolean; readonly children?: React.ReactNode; } +const badgeTheme = { + info: "bg-blue-500 text-white", + success: "bg-green-500 text-white", + warning: "bg-yellow-500 text-white", + danger: "bg-red-500 text-white", +}; + export function SettingsItem(props: SettingsItemProps) { - const { title, description, badge, children, className, loading } = props; + const { title, description, badge, badgeTheme: badgeThemeProp = "danger", children, className, loading } = props; + const badgeThemeClass = badgeTheme[badgeThemeProp]; return (