Files
housesof/src/components/atoms/ButtonCart.svelte
Félix Péault 73c9e80a21 Use SVG icons from global symbols
Allow to change color and avoid code duplication
2021-11-10 22:57:50 +01:00

22 lines
692 B
Svelte

<script lang="ts">
import { scale } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { cartOpen, cartAmount } from '$utils/stores/shop'
// Components
import Icon from '$components/atoms/Icon.svelte'
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
const openCart = () => {
$cartOpen = true
}
</script>
<div class="button-cart">
<ButtonCircle color="purple" on:click={openCart}>
<Icon icon="bag" label="Cart icon" />
</ButtonCircle>
{#if $cartAmount > 0}
<span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>
{/if}
</div>