51 lines
910 B
Vue
51 lines
910 B
Vue
<template>
|
|
<div class="settings-property-item">
|
|
<Component
|
|
:is="resolveComponent(`ui-icon-${icon}`)"
|
|
class="settings-property-item__icon"
|
|
/>
|
|
|
|
<div class="settings-property-item-content">
|
|
<p class="settings-property-item-content__title">
|
|
{{ title }}
|
|
</p>
|
|
<p v-if="text" class="settings-property-item-content__text">
|
|
{{ text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
icon: { type: String, required: true },
|
|
title: { type: String, required: true },
|
|
text: { type: String },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.settings-property-item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__icon{
|
|
color: $clr-cyan-500;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.settings-property-item-content{
|
|
&__title {
|
|
@include txt-i-sb;
|
|
}
|
|
|
|
&__text {
|
|
@include txt-s-m;
|
|
margin-top: 4px;
|
|
color: $clr-grey-500;
|
|
}
|
|
}
|
|
</style>
|