33 lines
907 B
Svelte
33 lines
907 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 | string
|
|
label?: string
|
|
color?: number
|
|
class?: string
|
|
}
|
|
|
|
const {role, label, color, ...props}: Props = $props()
|
|
|
|
const roleName = $derived(typeof role === "string" ? role : role.name)
|
|
const roleLabel = $derived(
|
|
label || (typeof role === "string" ? undefined : role.label) || roleName,
|
|
)
|
|
const roleColor = $derived(color ?? (typeof role === "string" ? undefined : role.color))
|
|
|
|
const style = $derived(
|
|
roleColor === undefined
|
|
? ""
|
|
: `color: ${roleColorToCSS(roleColor)}; border-color: ${roleColorToCSS(roleColor)};`,
|
|
)
|
|
|
|
const className = $derived(cx("badge badge-outline badge-sm", props.class))
|
|
</script>
|
|
|
|
<span class={className} {style}>
|
|
{roleLabel}
|
|
</span>
|