chore: merge components and stylesheets in same directory name
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
<style lang="scss">
|
||||
@import "./CartItem";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
// Components
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
|
||||
import Select from '$components/molecules/Select.svelte'
|
||||
|
||||
export let item: any
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const quantityLimit = 5
|
||||
|
||||
|
||||
// When changing item quantity
|
||||
const updateQuantity = ({ detail }: any) => {
|
||||
dispatch('updatedQuantity', {
|
||||
id: item.id,
|
||||
quantity: Number(detail)
|
||||
})
|
||||
}
|
||||
|
||||
// When removing item
|
||||
const removeItem = () => {
|
||||
dispatch('removed', item.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<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}>
|
||||
</div>
|
||||
<div class="cart-item__right">
|
||||
<h3>Poster</h3>
|
||||
<p>
|
||||
{item.product.name}
|
||||
<br>– {item.price}€
|
||||
</p>
|
||||
|
||||
{#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}
|
||||
|
||||
<ButtonCircle class="remove"
|
||||
size="tiny" color="gray"
|
||||
on:click={removeItem}
|
||||
>
|
||||
<svg width="8" height="8">
|
||||
<use xlink:href="#cross" />
|
||||
</svg>
|
||||
</ButtonCircle>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user