From eb9993871703996d07bab0d4c9683c371dc46980 Mon Sep 17 00:00:00 2001
From: Maksym Hazevych <mhazevych@proton.me>
Date: Mon, 20 May 2024 16:57:09 +0000
Subject: [PATCH] CardFooter: Use Btn component for actions

---
 src/components/Btn.vue        | 14 ++++++++++++--
 src/components/CardFooter.vue | 11 ++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/Btn.vue b/src/components/Btn.vue
index 5c59a094..dd804615 100644
--- a/src/components/Btn.vue
+++ b/src/components/Btn.vue
@@ -1,5 +1,5 @@
 <template>
-    <conditional-link :link="props" class="btn btn--primary">
+    <conditional-link :link="props" :class="classes">
         <slot name="start" />
         <span>
             <slot />
@@ -11,5 +11,15 @@
 <script setup lang="ts">
 import type { LinkProps } from "./ConditionalLink.vue";
 
-const props = defineProps<LinkProps>();
+interface BtnPropsI {
+    type?: "primary" | "link"
+}
+
+export type BtnProps = BtnPropsI & LinkProps;
+
+const props = defineProps<BtnProps>();
+
+const classes = ["btn"];
+if (props.type === "link") classes.push("btn--link")
+else classes.push("btn--primary")
 </script>
diff --git a/src/components/CardFooter.vue b/src/components/CardFooter.vue
index 92c57cfe..e7ba49a1 100644
--- a/src/components/CardFooter.vue
+++ b/src/components/CardFooter.vue
@@ -1,11 +1,12 @@
 <template>
     <div class="card-footer">
-        <div class="btn btn--link btn--inline btn--med" v-for="(action, index) in actions" :key="index"
+        <btn v-for="(action, index) in actions" :key="index" type="link" class="btn--inline btn--med"
             @click="action.onClick">
-            <an-icon :icon="action.icon" :iconPack="action.iconPack" :iconAsImage="action.iconAsImage"
-                :altText="action.altText" />
-            <span v-if="action.title">{{ action.title }}</span>
-        </div>
+            <template #start>
+                <an-icon :icon="action.icon" :iconPack="action.iconPack" />
+            </template>
+            {{ action.title }}
+        </btn>
     </div>
 </template>