- gestione dell'editor delle pagine (non funzionante!)

src/components/CMyCode/CMyCode.scss

@@ -0,0 +1,16 @@
+.cmy-code {
+  background: #0f172a;
+  color: #e2e8f0;
+  border-radius: 10px;
+  overflow: hidden;
+
+  .code-toolbar { background: rgba(255,255,255,0.04); }
+  .code-pre {
+    margin: 0;
+    padding: 12px 14px 14px;
+    overflow: auto;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+}

src/components/CMyCode/CMyCode.ts

@@ -0,0 +1,27 @@
+import { defineComponent, ref, computed } from 'vue';
+import { copyToClipboard } from 'quasar';
+import './CmyCode.scss';
+
+export default defineComponent({
+  name: 'CmyCode',
+  props: {
+    code: { type: String, required: true },
+    language: { type: String, default: 'text' }
+  },
+  setup(props) {
+    const copied = ref(false);
+    const language = computed(() => props.language || 'text');
+
+    async function copy() {
+      try {
+        await copyToClipboard(props.code || '');
+        copied.value = true;
+        setTimeout(() => (copied.value = false), 1200);
+      } catch (e) {
+        // opzionale: notifica $q.notify
+      }
+    }
+
+    return { copy, copied, language, code: props.code };
+  }
+});

src/components/CMyCode/CMyCode.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="cmy-code">
+    <div class="code-toolbar row items-center justify-between q-px-sm q-pt-sm">
+      <div class="text-caption">{{ language?.toUpperCase() || 'CODE' }}</div>
+      <q-btn flat dense icon="content_copy" @click="copy" :label="copied ? 'Copiato' : 'Copia'" />
+    </div>
+    <pre class="code-pre"><code :class="`lang-${language || 'text'}`">{{ code }}</code></pre>
+  </div>
+</template>
+
+
+<script lang="ts" src="./CMyCode.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyCode.scss';
+</style>
+
+

src/components/CMyCode/index.ts

@@ -0,0 +1 @@
+export {default as CMyCode} from './CMyCode.vue'