From e46a29e31441ca4686a4c9091d24a25057a89c0c Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Date: Sat, 22 Oct 2022 12:45:35 +0200
Subject: [PATCH] Use anchor element for the Button component

---
 src/components/atoms/button.astro | 21 +++++++++++----------
 src/pages/playground/button.astro |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/atoms/button.astro b/src/components/atoms/button.astro
index 119864d..55f8025 100644
--- a/src/components/atoms/button.astro
+++ b/src/components/atoms/button.astro
@@ -1,15 +1,16 @@
 ---
-export interface Props extends astroHTML.JSX.ButtonHTMLAttributes {}
+export interface Props {
+  href: string;
+}
 
 const { props } = Astro;
+
+const classes = {
+  main: 'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 select-none cursor-pointer',
+  hover: 'hover:bg-primary-700',
+  active: 'active:translate-y-px',
+  focus: 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
+};
 ---
 
-<button
-  type="button"
-  {...props}
-  class:list={[
-    'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 active:translate-y-px focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
-    props.class,
-  ]}
-  ><slot />
-</button>
+<a href={props.href} class:list={[classes.main, classes.hover, classes.active, classes.focus]}><slot /></a>
diff --git a/src/pages/playground/button.astro b/src/pages/playground/button.astro
index 11fb01e..9941cfd 100644
--- a/src/pages/playground/button.astro
+++ b/src/pages/playground/button.astro
@@ -3,5 +3,5 @@ import Button from '@/atoms/button.astro';
 ---
 
 <div class="p-5">
-  <Button>Button text</Button>
+  <Button href="#">Button text</Button>
 </div>