refactor: key actions to use button component

components/KeyActions.ce.vue

@@ -8,26 +8,18 @@ const { keyActions } = storeToRefs(useServerStore());
 </script>
 
 <template>
-  <div v-if="keyActions" class="flex flex-col gap-y-8px">
-    <!-- <BrandButton
-        v-for="action in keyActions" :key="action.name"
-        :click="action.click()"
+  <ul v-if="keyActions" class="flex flex-col gap-y-8px">
+    <li v-for="action in keyActions" :key="action.name">
+      <BrandButton
+        class="w-full max-w-300px"
+        @click="action.click()"
+        :external="action?.external"
+        :href="action?.href"
         :icon="action.icon"
         :text="action.text"
-      /> -->
-    <component
-      v-for="action in keyActions" :key="action.name"
-      :is="action.click ? 'button' : 'a'"
-      @click="action.click()"
-      rel="noopener noreferrer"
-      class="text-white text-14px text-center w-full flex-none flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md bg-gradient-to-r from-unraid-red to-orange hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60"
-      target="_blank"
-      download
-    >
-      <component v-if="action.icon" :is="action.icon" class="flex-shrink-0 w-14px" />
-      {{ action.text }}
-    </component>
-  </div>
+      />
+    </li>
+  </ul>
 </template>
 
 <style lang="postcss">

components/UserProfile/DropdownLaunchpad.vue

@@ -35,6 +35,8 @@ const showExpireTime = computed(() => {
         <BrandButton
           class="w-full"
           @click="action.click()"
+          :external="action?.external"
+          :href="action?.href"
           :icon="action.icon"
           :text="action.text"
         />