diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 68630b5..b3d8c23 100644
--- a/assets/styles/main.scss
+++ b/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;
- }
- }
}
}
}
diff --git a/components/content/CodeControls.vue b/components/content/CodeControls.vue
new file mode 100644
index 0000000..6729da7
--- /dev/null
+++ b/components/content/CodeControls.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 368d881..0a4cf1b 100644
--- a/pages/blog/[slug].vue
+++ b/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)
})