52 lines
No EOL
1.1 KiB
Vue
52 lines
No EOL
1.1 KiB
Vue
<template>
|
|
<component :is="asButton ? 'button' : 'div'" class="block flex-shrink-0 rounded-lg shadow-xl bg-gradient-to-br border-none text-inherit" :class="$style.root">
|
|
<div class="relative flex flex-col items-center justify-center h-full">
|
|
<div class="absolute top-2 right-2 bg-dark-800 rounded-full flex gap-2 items-center px-2">
|
|
<div v-for="tag in tags" :key="tag.label" :title="tag.label">
|
|
<component :is="tag.icon" class="relative top-0.75"/>
|
|
</div>
|
|
</div>
|
|
<slot/>
|
|
</div>
|
|
</component>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
.root {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("../assets/noise.png") repeat;
|
|
opacity: 10%;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:is(button) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import type { FunctionalComponent, PropType } from "vue"
|
|
|
|
const props = defineProps({
|
|
tags: {
|
|
type: Array as PropType<Array<{
|
|
label: string
|
|
icon: FunctionalComponent
|
|
}>>,
|
|
default: []
|
|
},
|
|
asButton: Boolean
|
|
})
|
|
</script> |