changes

app/components/imports/AddProduct.vue

@@ -0,0 +1,32 @@
+<script setup>
+import ProductForm from "@/components/imports/ProductForm.vue";
+import ProductVariantFormNew from "@/components/imports/ProductVariantFormNew.vue";
+
+const menus = [
+  {
+    id: "product",
+    name: "Tạo sản phẩm",
+  },
+  {
+    id: "product-variant",
+    name: "Thêm phiên bản",
+  },
+];
+const activeMenu = ref(menus[0]);
+</script>
+
+<template>
+  <div class="tabs">
+    <ul>
+      <li
+        v-for="menu in menus"
+        :key="menu.id"
+        :class="[{ 'is-active': activeMenu.id === menu.id }]"
+      >
+        <a @click="activeMenu = menu">{{ menu.name }}</a>
+      </li>
+    </ul>
+  </div>
+  <ProductForm v-if="activeMenu.id === 'product'" />
+  <ProductVariantFormNew v-if="activeMenu.id === 'product-variant'" />
+</template>