Alisa/web/src/components/ListViewElement.vue

<template>
  <v-sheet
  elevation="4"
  width="93vw"
  rounded="lg"
  class="mt-3"
  style="border-left: .5rem outset #0FA4AF"
  >
    <v-expansion-panels>
      <v-expansion-panel>
        <v-expansion-panel-title>
            <div class="mr-3">
              {{ props.licenseName }}
            </div>

            <div
              class="mr-3 d-flex align-self-center" style="align-items:center">
              <KeyRound class="mr-1"/>
                {{ props.licenseKey }}
            </div>

            <div class="mr-3 d-flex align-self-center" style="align-items:center">
              <CalendarCheck/>
                <span v-if="props.startDate == null || props.startDate == undefined || props.startDate.length == 0">
                  Verfügbar
                </span>
                <span v-else>
                  {{ props.startDate }}
                </span>
            </div>

            <div class="mr-3 d-flex align-self-center" style="align-items:center">
              <CalendarX/>
                <span v-if="props.endDate == null || props.endDate == undefined || props.endDate.length == 0">
                  Ewig Verfügbar
                </span>
                <span v-else>
                  {{ props.endDate }}
                </span>
             </div>

            <div class="mr-3 d-flex align-self-center" style="align-items:center">
              <img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
                <span v-if="props.amount == null || props.amount == undefined">
                  <Infinity />
                </span>
                <span v-else>
                  {{ props.amount }}
                </span>
            </div>

        </v-expansion-panel-title>
        <v-expansion-panel-text>
          Notes: {{ props.notes }}
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-sheet>

</template>

<script setup lang="ts">
  import { Infinity, KeyRound, Check, Skull, CalendarCheck, CalendarX } from 'lucide-vue-next';

  const props = defineProps({
    licenseName: String,
    licenseKey: String,
    startDate: String,
    endDate: String,
    amount: Number,
    notes: String,
  })

</script>

<style scoped>
  .values {
    display: flex;
    align-items: center;
  }

</style>