diff options
Diffstat (limited to 'examples/with-tailwindcss/src/components/Button.astro')
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index 5e241c44f..11c605a2f 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -1,10 +1,11 @@ --- -let { type = 'button' } = Astro.props; +// Click button, get confetti! +// Styled by Tailwind :) --- - -<button - class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" - {type} -> +<button class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"> <slot /> </button> +<script hoist> + import confetti from 'canvas-confetti'; + document.body.querySelector('button').addEventListener("click", () => confetti()); +</script>
\ No newline at end of file |