UserBox.vue

<script setup>
import SectionTitle from '@/components/SectionTitle.vue'
import { useApartmentStore } from '@/stores/apartments'

defineEmits(['onChangePassword'])

const apartments = useApartmentStore()
</script>

<template>
  <div class="user-box basic">
    <div class="user-box__content">
      <SectionTitle value="Benutzername für die Wohneinheit" />
      <span>{{ apartments.owner.username }}</span>
    </div>
    <div class="user-box__content">
      <button class="button primary" type="button" @click="$emit('onChangePassword')">
        <span>Passwort ändern</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.user-box {
  padding: var(--spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  align-items: center;
  border-radius: var(--radius);
}

@media (min-width: 48em) {
  .user-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.user-box__content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>