feat: add toast for copied

Author: barelyhuman

src/components/base-layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='min-w-screen min-h-screen flex flex-col p-5'>
+  <div class="min-w-screen min-h-screen flex flex-col p-5">
     <slot />
   </div>
 </template>

src/components/toast.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-if="state.show"
+    v-bind:class="{
+      'bg-black text-white': !state.error && !state.success,
+      'bg-green-500 text-white': state.success,
+      'bg-red-500 text-white': state.error,
+    }"
+    class="fixed top-2 right-2 shadow-xl border w-60 px-5 py-4 rounded-md z-20"
+  >
+    {{ state.message }}
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+
+const state = reactive({
+  message: "",
+  show: false,
+  success: false,
+  error: false,
+});
+
+function createToast(message, options = { delay: 2500 }) {
+  state.message = message;
+  state.show = true;
+  setTimeout(() => {
+    state.show = false;
+  }, options.delay);
+}
+
+function createSuccessToast(message, options) {
+  state.success = true;
+  state.error = false;
+  createToast(message, options);
+}
+
+function createErrorToast(message, options) {
+  state.success = false;
+  state.error = true;
+  createToast(message, options);
+}
+
+defineExpose({
+  createToast,
+  createSuccessToast,
+  createErrorToast,
+});
+</script>
+
+
+<style scoped>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>

src/pages/Home.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseLayout>
+    <Toast ref="toastRef" />
     <h1
       class="
         mb-12
@@ -60,11 +61,14 @@ import MenuItem from "../components/menu-item.vue";
 import Editor from "../components/editor.vue";
 import Button from "../components/button.vue";
 import Preview from "../components/preview.vue";
+import Toast from "../components/toast.vue";
 import { copy } from "../lib/copy";
 import { defaultMarkdownText } from "../resources/default-md";
-import { reactive, onMounted, onUnmounted } from "vue";
+import { reactive, onMounted, ref, onUnmounted } from "vue";
 import marked from "marked";
 
+const toastRef = ref(null);
+
 const state = reactive({ code: defaultMarkdownText, showPreview: false });
 
 onMounted(() => {
@@ -97,11 +101,12 @@ function handleChange(code) {
 }
 
 async function handleCopyAsHTML() {
-  if (!value) {
+  if (!state.code) {
     return;
   }
   const htmlValue = marked(state.code);
   await copy(htmlValue);
+  toastRef.value.createSuccessToast("Copied!");
 }
 
 function handlePreviewToggle() {