🔥 Finish Cart implementation

- Use Select component in CartItem to change quantity
- Visual update when removing or changing an item quantity
- API: Remove Cart item action
- API: Handle Cart item adding and updating (quantity)

src/components/molecules/CartItem.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher } from 'svelte'
+    // Components
+    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
+    import Select from '$components/molecules/Select.svelte'
 
     export let item: any
+    export let index: number
 
-    // console.log(item)
     const dispatch = createEventDispatcher()
+    const quantityLimit = 5
 
 
     // When changing item quantity
-    const updateQuantity = ({ target: { value }}: any) => {
+    const updateQuantity = ({ detail }: any) => {
         dispatch('updatedQuantity', {
             id: item.id,
-            quantity: Number(value)
+            quantity: Number(detail)
         })
     }
 
@@ -21,29 +25,39 @@
     }
 </script>
 
-<aside class="cart-item shadow-small">
+<div class="cart-item shadow-small">
     <div class="cart-item__left">
-        <img
-            src={item.product.images[0].file.url}
-            width={200}
-            height={300}
-            alt={item.product.name}
-        >
+        <img src={item.product.images[0].file.url} width={200} height={300} alt={item.product.name}>
     </div>
     <div class="cart-item__right">
         <h3>Poster</h3>
         <p>{item.product.name} – {item.price_total}€</p>
 
-        {#if item && item.product}
-            <div class="select">
-                <select on:change={updateQuantity}>
-                    {#each Array(5) as _, index}
-                        <option value={index + 1} selected={item.quantity - 1 === index}>{index + 1}</option>
-                    {/each}
-                </select>
-            </div>
+        {#if item && item.quantity}
+            <Select
+                name="sort" id="filter_sort"
+                options={[...Array(item.quantity <= quantityLimit ? quantityLimit : item.quantity)].map((_, index) => {
+                    return {
+                        value: `${index + 1}`,
+                        name: `${index + 1}`,
+                        default: index === 0,
+                        selected: index + 1 === item.quantity,
+                    }
+                })}
+                on:change={updateQuantity}
+                value={String(item.quantity)}
+            >
+                <span>Quantity:</span>
+            </Select>
         {/if}
 
-        <button on:click={removeItem}>Remove</button>
+        <ButtonCircle class="remove"
+            size="tiny" color="gray"
+            on:click={removeItem}
+        >
+            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" fill="#666"/>
+            </svg>
+        </ButtonCircle>
     </div>
-</aside>
+</div>