39 lines
879 B
Vue
39 lines
879 B
Vue
<template>
|
|
<div
|
|
class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2"
|
|
:class="{
|
|
'badge-activated': isActivated,
|
|
'badge-deactivated': !isActivated,
|
|
'bg-[#0099FF]': isActivated,
|
|
'bg-[#C9CDD4]': !isActivated,
|
|
}"
|
|
>
|
|
{{ displayText }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2024-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/Badge Status badge component that displays
|
|
* an activated/deactivated state with colored background.
|
|
*/
|
|
|
|
defineProps({
|
|
isActivated: {
|
|
type: Boolean,
|
|
required: true,
|
|
default: true,
|
|
},
|
|
displayText: {
|
|
type: String,
|
|
required: true,
|
|
default: "Status",
|
|
},
|
|
});
|
|
</script>
|