forked from didirus/AstralRinth
46c325f78a
* New envs frontend * lint fix * Add blog post, user-facing changes, dashboard warning, project page member warning, and migration reviewing. maybe some other misc stuff * lint * lint * ignore .data in .prettierignore * i18n as fuck * fix proj page * Improve news markdown rendering * improve phrasing of initial paragraph * Fix environments not reloading after save * index.ts instead of underscored name * shrink-0 back on these icons
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import type { MessageDescriptor } from '@vintl/vintl'
|
|
import { useVIntl } from '@vintl/vintl'
|
|
import { computed } from 'vue'
|
|
|
|
const { formatMessage } = useVIntl()
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
id?: string
|
|
title: string | MessageDescriptor
|
|
description?: string | MessageDescriptor
|
|
}>(),
|
|
{
|
|
id: undefined,
|
|
description: undefined,
|
|
},
|
|
)
|
|
|
|
const formattedTitle = computed(() =>
|
|
typeof props.title === 'string' ? props.title : formatMessage(props.title),
|
|
)
|
|
const formattedDescription = computed(() =>
|
|
typeof props.description === 'string'
|
|
? props.description
|
|
: props.description
|
|
? formatMessage(props.description)
|
|
: undefined,
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-2">
|
|
<label v-if="id" :for="id" class="text-lg font-extrabold text-contrast">
|
|
{{ formattedTitle }}
|
|
</label>
|
|
<p v-else class="m-0 text-lg font-extrabold text-contrast">
|
|
{{ formattedTitle }}
|
|
</p>
|
|
<p v-if="formattedDescription" class="text-sm m-0 text-secondary">
|
|
{{ formattedDescription }}
|
|
</p>
|
|
</div>
|
|
</template>
|