92 lines
1.9 KiB
Vue
92 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { PropType } from 'vue'
|
|
|
|
import warningIcon from '~/assets/images/icons/accent/warning.png'
|
|
import errorIcon from '~/assets/images/icons/accent/error.png'
|
|
import infoIcon from '~/assets/images/icons/accent/info.png'
|
|
import helpIcon from '~/assets/images/icons/accent/help.png'
|
|
import checkIcon from '~/assets/images/icons/accent/checkmark.png'
|
|
import ideaIcon from '~/assets/images/icons/accent/idea.png'
|
|
|
|
type IconOptions = 'warning' | 'error' | 'info' | 'help' | 'checkmark' | 'idea'
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String as PropType<IconOptions>,
|
|
default: 'warning',
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'Important',
|
|
},
|
|
})
|
|
|
|
const cards = {
|
|
warning: {
|
|
color: 'border-warning',
|
|
icon: {
|
|
src: warningIcon,
|
|
alt: 'Warning triangle',
|
|
},
|
|
},
|
|
error: {
|
|
color: 'border-error',
|
|
icon: {
|
|
src: errorIcon,
|
|
alt: 'Error circle',
|
|
},
|
|
},
|
|
info: {
|
|
color: 'border-info',
|
|
icon: {
|
|
src: infoIcon,
|
|
alt: 'Information circle',
|
|
},
|
|
},
|
|
help: {
|
|
color: 'border-help',
|
|
icon: {
|
|
src: helpIcon,
|
|
alt: 'Help circle',
|
|
},
|
|
},
|
|
checkmark: {
|
|
color: 'border-checkmark',
|
|
icon: {
|
|
src: checkIcon,
|
|
alt: 'Checkmark',
|
|
},
|
|
},
|
|
idea: {
|
|
color: 'border-idea',
|
|
icon: {
|
|
src: ideaIcon,
|
|
alt: 'Lightbulb',
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
|
|
<img
|
|
draggable="false"
|
|
:src="cards[props.type].icon.src"
|
|
:alt="cards[props.type].icon.alt"
|
|
class="w-12 h-12"
|
|
/>
|
|
<h3 class="whitespace-nowrap mb-0">{{ props.title }}</h3>
|
|
</div>
|
|
<div
|
|
:class="`box p-4 mb-4 ${cards[props.type].color} border-b border-r rounded-xl`"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.tilt {
|
|
transform: rotate(-2deg);
|
|
}
|
|
</style>
|