58 lines
987 B
Vue
58 lines
987 B
Vue
<template>
|
|
<div class="user-widget">
|
|
<div class="user-widget__avatar">
|
|
<avatar :avatar-url="avatarUrl" />
|
|
</div>
|
|
<span class="user-widget__name">{{ firstName }} {{ lastName }}</span>
|
|
<span
|
|
class="user-widget__date"
|
|
v-if="date"
|
|
>{{ date }}</span
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Avatar from '@/components/profile/Avatar.vue';
|
|
|
|
export default {
|
|
props: ['firstName', 'lastName', 'avatarUrl', 'date'],
|
|
|
|
components: {
|
|
Avatar,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/styles/_variables.scss';
|
|
|
|
.user-widget {
|
|
color: $color-silver-dark;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__name {
|
|
padding: 0px 10px;
|
|
color: $color-silver-dark;
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__date {
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__avatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
fill: $color-silver-dark;
|
|
}
|
|
|
|
&--is-profile {
|
|
& > span {
|
|
color: $color-brand;
|
|
}
|
|
}
|
|
}
|
|
</style>
|