chore: merge components and stylesheets in same directory name

This commit is contained in:
2024-07-24 10:59:34 +02:00
parent a9d937a2b5
commit cb7d83978d
92 changed files with 533 additions and 531 deletions

View File

@@ -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>