Fixed Errors

src/components/NameGenerator.vue

@@ -61,7 +61,17 @@
     </div>
 
     <div class="generators-grid" :class="`grid-${generators.length}`">
-      <NameGeneratorCard v-for="id in generators" :key="id" :card-id="id" />
+      <NameGeneratorCard 
+        v-for="id in generators" 
+        :key="id" 
+        :card-id="id"
+        @show-toast="handleToast"
+      />
+    </div>
+
+    <!-- Page-level toast notification -->
+    <div v-if="showToast" class="page-toast" :class="`toast-${toastType}`">
+      {{ toastMessage }}
     </div>
   </div>
 </template>
@@ -73,6 +83,20 @@ import NameGeneratorCard from "./NameGeneratorCard.vue";
 const generators = ref([1, 2, 3, 4]);
 let nextId = 5;
 
+// Toast state
+const showToast = ref(false);
+const toastMessage = ref("");
+const toastType = ref("success");
+
+function handleToast(event) {
+  toastMessage.value = event.message;
+  toastType.value = event.type;
+  showToast.value = true;
+  setTimeout(() => {
+    showToast.value = false;
+  }, event.type === "error" ? 4000 : 2000);
+}
+
 function addGenerator() {
   if (generators.value.length < 6) {
     generators.value.push(nextId++);
@@ -215,4 +239,42 @@ function removeGenerator() {
     justify-content: center;
   }
 }
+
+/* Page-level toast */
+.page-toast {
+  position: fixed;
+  top: var(--spacing-lg);
+  right: var(--spacing-lg);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius);
+  font-size: 0.9rem;
+  font-weight: 600;
+  z-index: 1000;
+  animation: slideInRight 0.3s ease;
+  max-width: 400px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.toast-success {
+  background: #10b981;
+  color: white;
+  border: 1px solid #059669;
+}
+
+.toast-error {
+  background: #ef4444;
+  color: white;
+  border: 1px solid #dc2626;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 </style>