<template>
  <div class="owner-widget">
    <user-icon></user-icon>
    <span>
        {{name}}
    </span>
  </div>
</template>

<script>
  import UserIcon from '@/components/icons/UserIcon.vue';

  export default {
    props: ['name'],

    components: {
      UserIcon
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_mixins.scss";

  .owner-widget {
    display: flex;
    align-items: center;
    opacity: 0.6;

    svg {
      width: 30px;
      fill: $color-darkgrey-1;
      margin-right: 15px;
    }

    & > span {
      @include room-widget-text-style;;
    }
  }
</style>
