LessonNotes.vue

<template>
  <v-card-text
    class="d-flex align-center justify-space-between justify-md-end flex-wrap gap"
  >
    <v-chip dense color="success">
      <v-chip small dense class="mr-2" color="green darken-3 white--text"
        >26</v-chip
      >
      von 30 anwesend
    </v-chip>
    <v-chip dense color="warning">
      <v-chip small dense class="mr-2" color="orange darken-3 white--text"
        >3</v-chip
      >
      entschuldigt
    </v-chip>
    <v-chip dense color="error">
      <v-chip small dense class="mr-2" color="red darken-3 white--text"
        >1</v-chip
      >
      unentschuldigt
    </v-chip>
    <v-chip dense color="grey lighten-1">
      <v-chip small dense class="mr-2" color="grey darken-1 white--text"
        >4</v-chip
      >
      Hausaufgaben vergessen
    </v-chip>
  </v-card-text>
</template>

<script>
export default {
  name: "LessonNotes",
  props: {
    documentation: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped>
.gap {
  gap: 0.25em;
}
</style>