37 lines
972 B
TypeScript
37 lines
972 B
TypeScript
|
import type { NuzlockeRules } from '../types'
|
||
|
|
import { RULE_DEFINITIONS } from '../types/rules'
|
||
|
|
|
||
|
|
interface RuleBadgesProps {
|
||
|
|
rules: NuzlockeRules
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RuleBadges({ rules }: RuleBadgesProps) {
|
||
|
|
const enabledRules = RULE_DEFINITIONS.filter((def) => rules[def.key])
|
||
|
|
|
||
|
|
if (enabledRules.length === 0) {
|
||
|
|
return (
|
||
|
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||
|
|
No rules enabled
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-wrap gap-1.5">
|
||
|
|
{enabledRules.map((def) => (
|
||
|
|
<span
|
||
|
|
key={def.key}
|
||
|
|
title={def.description}
|
||
|
|
className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||
|
|
def.category === 'core'
|
||
|
|
? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
|
||
|
|
: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{def.name}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|