42 lines
896 B
Vue
42 lines
896 B
Vue
<template>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<div class="instrument-widget">
|
|
<div
|
|
class="instrument-widget__description"
|
|
v-html="value.description"
|
|
/>
|
|
<router-link
|
|
:to="{ name: 'instrument', params: { slug: value.slug }, query: { hideCloseButton: true } }"
|
|
class="instrument-widget__button button"
|
|
:style="{
|
|
borderColor: value.foreground,
|
|
}"
|
|
target="_blank"
|
|
>
|
|
{{ $flavor.textInstrument }} anzeigen
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
|
|
export default {
|
|
props: ['value'],
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/_variables.scss';
|
|
|
|
.instrument-widget {
|
|
margin-bottom: $small-spacing;
|
|
|
|
&__description {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
&__button {
|
|
}
|
|
}
|
|
</style>
|