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>