44 lines
861 B
Vue
44 lines
861 B
Vue
<template>
|
|
<v-chip
|
|
:color="statusColor"
|
|
:size="size"
|
|
variant="flat"
|
|
class="font-weight-medium"
|
|
>
|
|
{{ status }}
|
|
</v-chip>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
import { BerthStatus } from '@/utils/types';
|
|
|
|
interface Props {
|
|
status: string;
|
|
size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'small'
|
|
});
|
|
|
|
const statusColor = computed(() => {
|
|
switch (props.status) {
|
|
case BerthStatus.Available:
|
|
return 'success'; // Green
|
|
case BerthStatus.Waitlist:
|
|
return 'primary'; // Blue
|
|
case BerthStatus.Reserved:
|
|
return 'warning'; // Orange
|
|
case BerthStatus.Sold:
|
|
return 'error'; // Red
|
|
default:
|
|
return 'grey';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Additional styling if needed */
|
|
</style>
|