<template>
    <div style="position: relative">
        <div @click="copy(content)" class="copy center"><UiIcon>content_copy</UiIcon></div>
        <p class="code" v-text="content"></p>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    content: string
}>()

function copy(content: string)
{
    navigator.clipboard.writeText(content)
}
</script>

<style scoped>
.code {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    white-space: preserve;
    tab-size: 2;
}
.copy {
    height: 2rem;
    width: 2rem;
    position: absolute;
    background-color: var(--primary-color);
    right: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    user-select: none;
}
.copy * {
    color: white;
}
</style>