8a2125ef16
* feat: backup admonitions * feat: align modals + fix backupitem * fix: body needs opac 80 * fix: lint
95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
'relative flex flex-col rounded-2xl border-[1px] border-solid p-4 gap-3 text-contrast',
|
|
typeClasses[type],
|
|
]"
|
|
>
|
|
<ButtonStyled
|
|
v-if="dismissible"
|
|
circular
|
|
type="highlight-colored-text"
|
|
:color="buttonColors[type]"
|
|
>
|
|
<button aria-label="Dismiss" class="absolute top-3 right-3" @click="$emit('dismiss')">
|
|
<XIcon class="h-4 w-4" />
|
|
</button>
|
|
</ButtonStyled>
|
|
|
|
<div
|
|
:class="[
|
|
'flex gap-2 items-start',
|
|
(header || $slots.header) && 'flex-col',
|
|
dismissible && 'pr-8',
|
|
]"
|
|
>
|
|
<div class="flex gap-2 items-start" :class="header || $slots.header ? 'w-full' : 'contents'">
|
|
<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
|
|
<component
|
|
:is="getSeverityIcon(type)"
|
|
:class="['h-6 w-6 flex-none', iconClasses[type]]"
|
|
/>
|
|
</slot>
|
|
<div v-if="header || $slots.header" class="font-semibold text-base">
|
|
<slot name="header">{{ header }}</slot>
|
|
</div>
|
|
</div>
|
|
<div class="font-normal text-base" :class="!(header || $slots.header) && 'flex-1'">
|
|
<slot>{{ body }}</slot>
|
|
</div>
|
|
</div>
|
|
<div v-if="showActionsUnderneath || $slots.actions">
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { XIcon } from '@modrinth/assets'
|
|
|
|
import { getSeverityIcon } from '../../utils'
|
|
import ButtonStyled from './ButtonStyled.vue'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
type?: 'info' | 'warning' | 'critical' | 'success'
|
|
header?: string
|
|
body?: string
|
|
showActionsUnderneath?: boolean
|
|
dismissible?: boolean
|
|
}>(),
|
|
{
|
|
type: 'info',
|
|
header: '',
|
|
body: '',
|
|
showActionsUnderneath: false,
|
|
dismissible: false,
|
|
},
|
|
)
|
|
|
|
defineEmits<{
|
|
dismiss: []
|
|
}>()
|
|
|
|
const typeClasses = {
|
|
info: 'border-brand-blue bg-bg-blue',
|
|
warning: 'border-brand-orange bg-bg-orange',
|
|
critical: 'border-brand-red bg-bg-red',
|
|
success: 'border-brand-green bg-bg-green',
|
|
}
|
|
|
|
const iconClasses = {
|
|
info: 'text-brand-blue',
|
|
warning: 'text-brand-orange',
|
|
critical: 'text-brand-red',
|
|
success: 'text-brand-green',
|
|
}
|
|
|
|
const buttonColors: Record<string, 'blue' | 'orange' | 'red' | 'green'> = {
|
|
info: 'blue',
|
|
warning: 'orange',
|
|
critical: 'red',
|
|
success: 'green',
|
|
}
|
|
</script>
|