From 6bdea219bf0845d33c63032664591e15ce897900 Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Sun, 2 Apr 2023 01:53:29 -0400
Subject: [PATCH] Create component (#34)

---
 docs/.vitepress/config.js        |  1 +
 docs/components/copy-code.md     | 13 +++++++
 lib/components/base/CopyCode.vue | 64 ++++++++++++++++++++++++++++++++
 lib/components/index.js          |  1 +
 4 files changed, 79 insertions(+)
 create mode 100644 docs/components/copy-code.md
 create mode 100644 lib/components/base/CopyCode.vue

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 9c341558..99745720 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -39,6 +39,7 @@ export default {
           { text: 'Toggle', link: '/components/toggle' },
           { text: 'Promotion', link: '/components/promotion' },
           { text: 'Markdown', link: '/components/markdown' },
+          { text: 'Copy Code', link: '/components/copy-code' },
         ],
       },
     ],
diff --git a/docs/components/copy-code.md b/docs/components/copy-code.md
new file mode 100644
index 00000000..d338898a
--- /dev/null
+++ b/docs/components/copy-code.md
@@ -0,0 +1,13 @@
+# Copy Code
+
+<DemoContainer>
+  <CopyCode
+    text="urmom"
+  />
+</DemoContainer>
+
+```vue
+  <CopyCode
+    text="urmom"
+  />
+```
diff --git a/lib/components/base/CopyCode.vue b/lib/components/base/CopyCode.vue
new file mode 100644
index 00000000..bf15ca08
--- /dev/null
+++ b/lib/components/base/CopyCode.vue
@@ -0,0 +1,64 @@
+<template>
+  <button class="code" :class="{ copied }" title="Copy code to clipboard" @click="copyText">
+    {{ text }}
+    <CheckIcon v-if="copied" />
+    <ClipboardCopyIcon v-else />
+  </button>
+</template>
+
+<script setup>
+import { CheckIcon, ClipboardCopyIcon } from '@/components'
+</script>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      copied: false,
+    }
+  },
+  methods: {
+    async copyText() {
+      await navigator.clipboard.writeText(this.text)
+      this.copied = true
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.code {
+  display: flex;
+  grid-gap: 0.5rem;
+  font-family: var(--mono-font);
+  font-size: var(--font-size-sm);
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--color-button-bg);
+  width: min-content;
+  border-radius: 10px;
+  user-select: text;
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
+    outline 0.2s ease-in-out;
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+
+  &:active {
+    transform: scale(0.95);
+    filter: brightness(0.8);
+  }
+}
+</style>
diff --git a/lib/components/index.js b/lib/components/index.js
index a52dd8d3..c211a446 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -18,6 +18,7 @@ export { default as DropdownSelect } from './base/DropdownSelect.vue'
 export { default as FileInput } from './base/FileInput.vue'
 export { default as DropArea } from './base/DropArea.vue'
 export { default as Toggle } from './base/Toggle.vue'
+export { default as CopyCode } from './base/CopyCode.vue'
 
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'