Alisa/web/src/components/ListViewElement.vue

<template>
  <v-sheet
  elevation="4"
  width="93vw"
  rounded="lg"
  >
  <div class="values ml-2 py-3">
    <div class="mr-3">
      {{ props.licenseName }}
    </div>
    <div class="mr-3">
      <span style="display: flex;">
        <KeyRound class="transform mr-1"/>
        {{ props.licenseKey }}
      </span>
    </div>
    <div class="mr-3">
      <span style="display: flex;">
        <Check class="mr-1"/>
        {{ props.startDate }}
      </span>
    </div>
    <div class="mr-3">
      <span style="display: flex;">
        <Skull class="mr-1"/>
        {{ props.endDate }}
      </span>
    </div>
    <div class="mr-3">
      <span style="display: flex;">
        <img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
        {{ props.amount }}
      </span>
    </div>
  </div>
  </v-sheet>

</template>

<script setup lang="ts">
  import { KeyRound } from 'lucide-vue-next';
  import { Check } from 'lucide-vue-next';
  import { Skull } 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;
  }

  transform {
    transform: scale(0.85);
    transform-origin: left;
  }

</style>