mirror of
https://github.com/danbulant/Portfolio
synced 2026-05-25 04:52:05 +00:00
65 lines
1.2 KiB
Svelte
65 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let value: string;
|
|
|
|
export let id: number | undefined;
|
|
|
|
let isPrepared = false;
|
|
|
|
const buttonLogic = () => {
|
|
if (isPrepared) {
|
|
dispatch('delete', {
|
|
id: id
|
|
});
|
|
} else {
|
|
dispatch('prepared', {
|
|
id: id
|
|
});
|
|
isPrepared = true;
|
|
setTimeout(() => {
|
|
isPrepared = false;
|
|
}, 3000);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<button on:click={buttonLogic} class="animate-bounce" class:isPrepared>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="mr-2 h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
/>
|
|
</svg>
|
|
|
|
{value}
|
|
</button>
|
|
|
|
<style lang="postcss">
|
|
button {
|
|
@apply inline-flex items-center;
|
|
@apply bg-red-700;
|
|
@apply @apply rounded-lg p-3 font-semibold
|
|
text-white transition-colors duration-300;
|
|
|
|
animation: none !important;
|
|
}
|
|
button:hover {
|
|
@apply bg-red-800;
|
|
}
|
|
|
|
.isPrepared {
|
|
@apply bg-red-800;
|
|
animation: bounce 1s infinite !important;
|
|
}
|
|
</style>
|