Pass component into hyperscript

assets/styles/main.scss

@@ -238,33 +238,6 @@ body {
           margin-right: 1.5rem;
         }
       }
-
-      .button {
-        position: absolute;
-
-        top: 0;
-        right: 0;
-
-        margin: 0.5em;
-        padding: 0.5em;
-
-        cursor: pointer;
-
-        background-color: rgb(153 153 255 / 10%);
-
-        border: 1px solid rgb(153 153 255 / 60%);
-        border-radius: 0.5em;
-
-        opacity: 0;
-
-        transition: 0.3s ease;
-      }
-
-      &:hover {
-        .button {
-          opacity: 1;
-        }
-      }
     }
   }
 }

components/content/CodeControls.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div
+    class="absolute flex flex-col justify-start top-0 left-0 w-full h-full pointer-events-none"
+  >
+    <div class="flex flex-row justify-end items-center p-2">
+      <iconify-icon icon="mdi:content-copy" inline class="button" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.button {
+  @apply flex-grow-0;
+
+  pointer-events: auto;
+
+  padding: 0.5em;
+
+  cursor: pointer;
+
+  background-color: rgb(153 153 255 / 10%);
+
+  border: 1px solid rgb(153 153 255 / 60%);
+  border-radius: 0.5em;
+
+  opacity: 0.5;
+
+  transition: 0.3s ease;
+}
+</style>

pages/blog/[slug].vue

@@ -2,6 +2,7 @@
 import { formatDate } from 'date-fns'
 import chestAnimation from '~/assets/images/chest.webp'
 import { render } from 'vue'
+import { CodeControls } from '#components'
 
 const config = useAppConfig()
 const route = useRoute()
@@ -80,12 +81,7 @@ onMounted(() => {
     })
 
   content.value?.querySelectorAll('pre').forEach((pre: HTMLElement) => {
-    const icon = h('iconify-icon', {
-      icon: 'mdi:content-copy',
-      inline: true,
-      class: 'button',
-      onClick: () => clipboard(pre),
-    })
+    const icon = h(CodeControls)
 
     render(icon, pre)
   })