создаю телегу товаров

layouts/default.vue

@@ -11,11 +11,18 @@
           PAXTON
         </h1>
 
-        <Icon
-          name="lucide:shopping-cart"
-          class="cursor-pointer mr20 w-6 h-6 text-gray-700"
+        <div
+          class="header__cart"
           @click="router.push(`/cart`)"
-        />
+        >
+          <Icon
+            name="lucide:shopping-cart"
+            class="cursor-pointer w-6 h-6 text-gray-700"
+          />
+          <div v-if="cart?.line_items?.length" class="header__cart-count">
+            {{ cart.line_items.length }}
+          </div>
+        </div>
       </div>
     </header>
 
@@ -33,6 +40,7 @@
 
 <script setup lang="ts">
 const router = useRouter()
+const { cart } = useCart()
 </script>
 
 <style lang="scss" scoped>
@@ -45,7 +53,6 @@ const router = useRouter()
 .container {
   --ui-container: 100%;
   max-width: 100%;
-
   margin: 0;
   padding: 0;
 }
@@ -67,16 +74,36 @@ const router = useRouter()
     align-items: center;
     justify-content: space-between;
     text-align: center;
+    padding: 0 16px;
   }
 
   &__headline {
-    display: flex;
-    align-items: center;
-    height: 100%;
     font-size: 32px;
     color: black;
     cursor: pointer;
   }
+
+  &__cart {
+    position: relative;
+    display: inline-block;
+  }
+
+  &__cart-count {
+    cursor: pointer;
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    background: red;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .main {