Fix Structure, Add icons

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@heroicons/vue": "^2.1.1",
     "fabric": "^5.3.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"

src/components/Home.vue

@@ -1,14 +1,50 @@
 <script setup>
-import Card from './Card.vue';
 import Navbar from './Navbar.vue';
-defineProps({
-  msg: {
-    type: String,
-    required: true,
+
+const data = [
+  {
+    name: 'Spongebob 1',
+    desc: 'Spongebob template',
+    imageName: 'spongebob1.png',
+    image: new URL('../assets/images/spongebob1.png', import.meta.url).href,
+  },
+  {
+    name: 'Sonic 1',
+    desc: 'Sonic template',
+    imageName: 'sonic1.jpg',
+    image: new URL('../assets/images/sonic1.jpg', import.meta.url).href,
   },
-});
+];
+
+defineOptions([Navbar]);
 </script>
 
 <template>
-  <Card />
+  <div class="mx-auto p-4">
+    <div class="grid grid-cols-4 gap-4">
+      <div
+        class="card bg-base-100 shadow-xl"
+        v-for="(item, index) in data"
+        :key="index"
+      >
+        <figure>
+          <img class="h-60" :src="item.image" />
+        </figure>
+        <div class="card-body">
+          <h2 class="card-title">{{ item.name }}</h2>
+          <p>{{ item.desc }}</p>
+          <div class="card-actions justify-end">
+            <RouterLink
+              :to="{
+                name: 'editor',
+                params: { id: item.imageName },
+              }"
+              class="btn btn-primary"
+              >Use template</RouterLink
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

src/views/EditorView.vue

@@ -3,6 +3,12 @@ import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { fabric } from 'fabric';
 import Modal from './Modal.vue';
+import {
+  PaintBrushIcon,
+  PencilSquareIcon,
+  TrashIcon,
+  ArrowDownIcon,
+} from '@heroicons/vue/16/solid';
 
 const route = useRoute();
 const canvas = ref(null);
@@ -106,31 +112,37 @@ function download() {
   <div class="flex flex-row">
     <div class="bg-neutral p-4 w-60 space-y-1 flex flex-col">
       <div class="text-white text-xl">Tools</div>
-      <div
-        class="text-white btn btn-xs"
-        :class="{
-          'btn-error': brushObj.active == true,
-          'btn-info': brushObj.active == false,
-        }"
-        @click="showBrush"
-      >
-        Brush
-      </div>
-      <div
-        class="text-white btn btn-xs btn-info"
-        :class="{
-          'btn-error': textObj.active == true,
-          'btn-info': textObj.active == false,
-        }"
-        @click="showText"
-      >
-        Text
-      </div>
-      <div class="text-white btn btn-xs btn-info" @click="deleteObject">
-        Delete
-      </div>
-      <div class="text-white btn btn-xs btn-info" @click="download">
-        Download
+      <div class="grid grid-cols-4 gap-2 mt-2">
+        <div
+          class="text-white flex flex-col"
+          :class="{
+            'text-red-500': brushObj.active == true,
+            'text-white': brushObj.active == false,
+          }"
+          @click="showBrush"
+        >
+          <PaintBrushIcon class="h-6 w-6 mx-auto" />
+          <span class="text-center text-xs">Brush</span>
+        </div>
+        <div
+          class="text-white flex flex-col"
+          :class="{
+            'text-red-500': textObj.active == true,
+            'text-white': textObj.active == false,
+          }"
+          @click="showText"
+        >
+          <PencilSquareIcon class="h-6 w-6 mx-auto" />
+          <span class="text-center text-xs">Text</span>
+        </div>
+        <div class="text-white flex flex-col" @click="deleteObject">
+          <TrashIcon class="h-6 w-6 mx-auto" />
+          <span class="text-center text-xs">Delete</span>
+        </div>
+        <div class="text-white flex flex-col" @click="download">
+          <ArrowDownIcon class="h-6 w-6 mx-auto" />
+          <span class="text-center text-xs">Download</span>
+        </div>
       </div>
     </div>
     <div align="center" class="mx-auto pb-4">