pop-up

components/CartPopup.vue

@@ -1,7 +1,26 @@
 <template>
-    <div class="p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl">
-        <div class="" v-if="productStore.productList">
-            {{ productStore.productList }}
+    <div class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full">
+        <div class="flex items-center h-[205px]" v-if="productStore.productList">
+            <div class="w-[205px] h-full flex items-center justify-center">
+                <img :src="`https://www.yourgold.cz/api/public/file/${productStore.productList[0]?.cover_picture_uuid}.webp`"
+                    alt="pics" class="w-auto h-full" />
+            </div>
+            <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px] max-w-[250px]"
+                @click="productStore.addToCart(productStore.productList[0])">
+                <h3
+                    class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
+                    {{ productStore.productList[0]?.name }}
+                </h3>
+                <div class="">
+                    <p
+                        class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                        {{ productStore.productList[0]?.formatted_price }}
+                    </p>
+                    <div class="">
+
+                    </div>
+                </div>
+            </div>
         </div>
         <UiButtonArrow class="w-full" type="fill" :arrow="true">Přejít k pokladně</UiButtonArrow>
     </div>