feat: add useDeleteSnippet and fix error with type of tags in the Car…

…dSnippet

src/assets/icons/CrossIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>

src/assets/icons/TrashIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.5 1C5.22386 1 5 1.22386 5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5ZM3 3.5C3 3.22386 3.22386 3 3.5 3H5H10H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5ZM5 4H10V12H5V4Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>

src/components/CardSnippet.vue

@@ -21,12 +21,16 @@ defineProps({
     type: String,
     default: "",
   },
-  tag: {
-    type: Array<string>,
+  tags: {
+    type: String,
     default: "",
   },
 });
 
+const splitTags = (tags: string) => {
+  return tags.split(",");
+};
+
 onMounted(() => {
   Prism.highlightAll();
 });
@@ -49,7 +53,13 @@ onMounted(() => {
         </div>
         <div class="relative mt-4">
           <h3 class="text-sm font-bold text-gray-300">
-            {{ tag }}
+            <span
+              v-for="(tag, index) in splitTags(tags)"
+              :key="index"
+              :class="`p-1.5 py-1 mb-4 mr-1 rounded-md text-gray-800 bg-vue text-xs overflow-hidden`"
+            >
+              {{ tag }}
+            </span>
           </h3>
         </div>
         <div

src/composables/useDeleteSnippet.ts

@@ -0,0 +1,29 @@
+import { ref } from "vue";
+import { db } from "../services/firebase/firebase.config";
+import { doc, deleteDoc } from "firebase/firestore";
+
+export function useDeleteSnippet() {
+  const error = ref<string | null>(null);
+  const isDeleting = ref(false);
+
+  const deleteSnippet = async (snippetId: string): Promise<void> => {
+    try {
+      isDeleting.value = true;
+      const snippetDocRef = doc(db, "snippets", snippetId);
+      await deleteDoc(snippetDocRef);
+      console.log("Snippet deleted successfully.");
+      error.value = null;
+    } catch (e) {
+      error.value =
+        e instanceof Error ? e.message : "Could not delete the snippet.";
+    } finally {
+      isDeleting.value = false;
+    }
+  };
+
+  return {
+    error,
+    isDeleting,
+    deleteSnippet,
+  };
+}

src/views/EditSnippetView.vue

@@ -5,6 +5,7 @@ import InputForRichText from "../components/InputForRichText.vue";
 import { useAuthStore } from "../store/authStore";
 import { useUpdateSnippet } from "../composables/useUpdateSnippet";
 import { useGetSnippets } from "../composables/useGetSnippets";
+import CrossIcon from "../assets/icons/CrossIcon.vue";
 import { useRouter } from "vue-router";
 
 const authStore = useAuthStore();
@@ -45,6 +46,10 @@ const handleSubmit = (event: Event) => {
   router.push(`/snippet/${id}`);
 };
 
+const pushBack = () => {
+  router.push(`/snippet/${id}`);
+};
+
 onMounted(async () => {
   if (!authStore.isLoggedIn) {
     router.push("/login");
@@ -60,8 +65,14 @@ onMounted(async () => {
   >
     <div class="px-4 max-w-full sm:px-0 sm:mx-auto sm:w-full sm:max-w-[720px]">
       <div
-        class="bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
+        class="relative bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
       >
+        <button
+          class="absolute top-6 right-6 text-danger opacity-60"
+          @click="pushBack"
+        >
+          <CrossIcon />
+        </button>
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <h3
             class="pb-11 text-center text-2xl font-bold leading-9 tracking-tight text-primary"

src/views/HomeView.vue

@@ -10,8 +10,8 @@ import LoadingCircle from "../components/LoadingCircle.vue";
 const { snippets, fetchSnippets, isLoading, error } = useGetSnippets();
 const { filteredSnippets } = useFilter(snippets);
 
-onMounted(() => {
-  fetchSnippets();
+onMounted(async () => {
+  await fetchSnippets();
 });
 </script>
 
@@ -36,7 +36,7 @@ onMounted(() => {
             :code="snippet.code"
             :title="snippet.title"
             :description="snippet.description"
-            :tag="snippet.tags"
+            :tags="snippet.tags"
           />
         </div>
       </section>

src/views/ShowSnippetView.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import Prism from "prismjs";
 import { useRouter } from "vue-router";
-import { onMounted, reactive, nextTick } from "vue";
+import { onMounted, reactive, nextTick, watch } from "vue";
 import { useAuthStore } from "../store/authStore";
 import { useGetSnippets } from "../composables/useGetSnippets";
+import { useDeleteSnippet } from "../composables/useDeleteSnippet";
 import { useClipboard } from "@vueuse/core";
+import TrashIcon from "../assets/icons/TrashIcon.vue";
 import PencilIcon from "../assets/icons/PencilIcon.vue";
 import CopyIcon from "../assets/icons/CopyIcon.vue";
 import LoadingCircle from "../components/LoadingCircle.vue";
@@ -41,6 +43,7 @@ const fillSnippetData = () => {
 };
 
 const { copy, copied } = useClipboard();
+const { isDeleting, deleteSnippet } = useDeleteSnippet();
 
 const handleEdit = () => {
   router.push(`/edit/${id}`);
@@ -56,6 +59,12 @@ onMounted(async () => {
   await nextTick();
   Prism.highlightAll();
 });
+
+watch(isDeleting, (value) => {
+  if (value) {
+    router.push("/");
+  }
+});
 </script>
 
 <template>
@@ -67,11 +76,17 @@ onMounted(async () => {
         class="relative bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
       >
         <button
-          class="absolute top-6 right-6 text-white opacity-60"
+          class="absolute top-6 right-6 text-secondary opacity-60"
           @click="handleEdit"
         >
           <PencilIcon />
         </button>
+        <button
+          class="absolute top-6 left-6 text-danger opacity-60"
+          @click="deleteSnippet(snippetData.id)"
+        >
+          <TrashIcon />
+        </button>
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
           <h3
             class="pb-11 text-center text-2xl font-bold leading-9 tracking-tight text-primary"

tailwind.config.js

@@ -11,7 +11,7 @@ export default {
         hover: "#58D5BA",
         ring: "#277F70",
         button: "#24292F]",
-        danger: "#e3342f",
+        danger: "#FF9592",
         card: "#0F1B1B",
         background: "#262a31",
         darktext: "#1d1d1d",