forked from coracle/flotilla
25 lines
586 B
Svelte
25 lines
586 B
Svelte
<script lang="ts">
|
|
import cx from "classnames"
|
|
import type {RoleDefinition} from "@app/core/roles"
|
|
import {roleColorToCSS} from "@app/core/roles"
|
|
|
|
type Props = {
|
|
role: RoleDefinition
|
|
class?: string
|
|
}
|
|
|
|
const {role, ...props}: Props = $props()
|
|
|
|
const style = $derived(
|
|
role.color === undefined
|
|
? ""
|
|
: `color: ${roleColorToCSS(role.color)}; border-color: ${roleColorToCSS(role.color)};`,
|
|
)
|
|
|
|
const className = $derived(cx("badge badge-outline badge-sm", props.class))
|
|
</script>
|
|
|
|
<span class={className} {style}>
|
|
{role.label || role.name}
|
|
</span>
|