feat: display product options

spa/src/views/Product.vue

@@ -20,11 +20,14 @@
           <h3 class="text-sm font-medium">{{ product.manufacturer }}</h3>
         </div>
 
-        <!-- Options -->
         <div class="mt-4 lg:row-span-3 lg:mt-0">
           <p class="text-3xl tracking-tight">{{ product.price }}</p>
         </div>
 
+        <div v-if="product.options && product.options.length" class="mt-4">
+          <ProductOptions v-model="product.options"/>
+        </div>
+
         <div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pt-6 lg:pr-8 lg:pb-16">
           <!-- Description and details -->
           <div>
@@ -34,7 +37,6 @@
               <p class="text-base" v-html="product.description"></p>
             </div>
           </div>
-
         </div>
       </div>
     </div>
@@ -47,6 +49,7 @@ import {$fetch} from "ofetch";
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
 import {useHapticFeedback} from 'vue-tg';
+import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 const hapticFeedback = useHapticFeedback();
 
 const router = useRouter()