49 lines
1.3 KiB
Svelte
49 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { fade, fly } from 'svelte/transition'
|
|
import { cartOpen } from '$utils/store'
|
|
import { quartOut } from 'svelte/easing'
|
|
// Components
|
|
import Button from '$components/atoms/Button.svelte'
|
|
import PosterCart from '$components/molecules/PosterCart.svelte'
|
|
|
|
|
|
// Closing the cart
|
|
const handleCloseCart = () => {
|
|
$cartOpen = false
|
|
}
|
|
</script>
|
|
|
|
<aside class="cart"
|
|
transition:fly={{ x: 48, duration: 600, easing: quartOut }}
|
|
>
|
|
<header class="cart__heading">
|
|
<h2>Cart</h2>
|
|
<button class="text-label" on:click={handleCloseCart}>Close</button>
|
|
</header>
|
|
|
|
<div class="cart__content">
|
|
<PosterCart />
|
|
<PosterCart />
|
|
</div>
|
|
|
|
<footer class="cart__total">
|
|
<div class="cart__total--sum">
|
|
<h3>Total</h3>
|
|
<span>3 articles</span>
|
|
<p>90€</p>
|
|
</div>
|
|
<div class="cart__total--checkout">
|
|
<p>Shipping will be calculated from the delivery address during the checkout process</p>
|
|
<Button
|
|
text="Checkout"
|
|
color="pink"
|
|
size="small"
|
|
/>
|
|
</div>
|
|
</footer>
|
|
</aside>
|
|
|
|
<div class="cart-overlay"
|
|
transition:fade={{ duration: 600, easing: quartOut }}
|
|
on:click={handleCloseCart}
|
|
/> |