<script setup lang="ts">
import { defineProps } from 'vue';

import { renderSVG } from 'uqr';

const { content } = defineProps({
  content: String,
});

const svg = renderSVG(content);

</script>

<template>
  <div class="qr-code">
<!--    <span class="uuid">1337-9339</span>-->
    <div :innerHTML="svg"></div>
  </div>
</template>

<style scoped>
.qr-code {
  aspect-ratio: 1 / 1;
  background-color: white;
  padding: 3px;
}
.uuid {
  color: rgba(51, 51, 51, 0.91);
  font-size: 90%;
  font-family: monospace;
}
</style>
