feat: refactor button component to use link component and remove unus…

…ed variants

templates/components/button.html.twig

@@ -7,18 +7,13 @@
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
             secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
             destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
             default: 'h-10 px-4 py-2',
             sm: 'h-8 rounded-md px-3',
             lg: 'h-12 rounded-md px-8',
         }
     },
-    compoundVariants: [{
-        variant: ['link'],
-        class: 'h-auto p-0',
-    }],
     defaultVariants: {
         variant: 'default',
         size: 'default',

templates/components/link.html.twig

@@ -0,0 +1,26 @@
+{% props variant = 'default', size = 'default' %}
+
+{% set linkVariants = cva({
+    base: 'inline-flex items-center justify-center gap-2 w-fit whitespace-nowrap transition-colors underline-offset-4 hover:underline',
+    variants: {
+        variant: {
+            default: 'text-primary',
+            secondary: 'text-secondary',
+        },
+        size: {
+            default: 'text-base',
+            sm: 'text-sm',
+            lg: 'text-lg',
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    }
+}) %}
+
+<a {{ attributes.without('class') }}
+    class="{{ linkVariants.apply({variant, size}, attributes.render('class'))|tailwind_merge }}"
+>
+    {% block content '' %}
+</a>

templates/default/index.html.twig

@@ -10,7 +10,7 @@
             <twig:button size="lg">Default</twig:button>
             <twig:button as="a" href="{{ path('homepage') }}" variant="secondary">Secondary</twig:button>
             <twig:button variant="destructive" size="sm">Destructive</twig:button>
-            <twig:button as="a" href="{{ path('index_products') }}" variant="link">Show products</twig:button>
+            <twig:link href="{{ path('index_products') }}" size="lg">Show products</twig:link>
         </div>
     </section>
 {% endblock %}

templates/products/index.html.twig

@@ -1,7 +1,7 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <twig:button as="a" href="{{ path('homepage') }}" variant="link">Back home</twig:button>
+    <twig:link href="{{ path('homepage') }}">Back home</twig:link>
     <section class="space-y-4">
         <twig:heading as="h1">Our products</twig:heading>
         <div class="w-fit mx-auto grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">