101 lines
1.9 KiB
Vue
101 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({
|
|
icon: {
|
|
type: String as PropType<IconOptions>,
|
|
default: 'warning',
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'Important',
|
|
},
|
|
})
|
|
|
|
let cardIcon = warningIcon
|
|
let color = 'rgb(255 246 147 / 60%)'
|
|
|
|
switch (props.icon) {
|
|
case 'error':
|
|
cardIcon = errorIcon
|
|
color = 'rgb(255 113 113 / 60%)'
|
|
break
|
|
|
|
case 'info':
|
|
cardIcon = infoIcon
|
|
color = 'rgb(94 162 255 / 60%)'
|
|
|
|
break
|
|
|
|
case 'help':
|
|
cardIcon = helpIcon
|
|
color = 'rgb(178 104 255 / 60%)'
|
|
|
|
break
|
|
|
|
case 'checkmark':
|
|
cardIcon = checkIcon
|
|
color = 'rgb(69 255 255 / 60%)'
|
|
|
|
break
|
|
|
|
case 'idea':
|
|
cardIcon = ideaIcon
|
|
color = 'rgb(255 255 255 / 60%)'
|
|
|
|
break
|
|
|
|
case 'warning':
|
|
default:
|
|
break
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tilt flex flex-row items-center gap-2 mb-0 sm:mb-2 md:mb-4">
|
|
<img
|
|
draggable="false"
|
|
:src="cardIcon"
|
|
:alt="`Download`"
|
|
class="icon-image"
|
|
/>
|
|
<h3 class="whitespace-nowrap mb-0">{{ props.title }}</h3>
|
|
</div>
|
|
<div class="box p-4 rounded-xl mb-4">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.tilt {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
.box {
|
|
> p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px ridge;
|
|
border-right: 1px ridge;
|
|
border-color: v-bind(color);
|
|
}
|
|
|
|
.icon {
|
|
&-image {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
</style>
|