fix: server state buy component

components/UserProfile/ServerState.vue

@@ -1,46 +1,39 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useServerStore } from '~/store/server';
-const serverStore = useServerStore();
-const { state, stateData } = storeToRefs(serverStore);
+import type { ServerStateDataAction } from '~/types/server';
+
+const { state, stateData } = storeToRefs(useServerStore());
+
+const purchaseAction = computed((): ServerStateDataAction | undefined => {
+  return stateData.value.actions && stateData.value.actions.find(action => action.name === 'purchase');
+});
+const upgradeAction = computed((): ServerStateDataAction | undefined => {
+  return stateData.value.actions && stateData.value.actions.find(action => action.name === 'upgrade');
+});
 </script>
 
 <template>
-  <template v-if="stateData.actions.includes('upgrade')">
-    <button
-      @click="console.log('TODO-UPGRADE_LINK')"
-      class="link text-gamma"
-      :title="'Upgrade'"
-    >
-      <h5>Unraid OS <em><strong>{{ stateData.humanReadable }}</strong></em></h5>
-    </button>
-  </template>
-  <h5 v-else>
-    Unraid OS <em :class="{ 'text-red': stateData.error || state === 'EEXPIRED' }"><strong>{{ stateData.humanReadable }}</strong></em>
-  </h5>
+  <span class="flex flex-row items-center gap-x-8px">
+    <template v-if="upgradeAction">
+      <UpcServerStateBuy
+        @click="upgradeAction.click()"
+        class="text-gamma"
+        :title="'Upgrade'"
+      >
+        <h5>Unraid OS <em><strong>{{ stateData.humanReadable }}</strong></em></h5>
+      </UpcServerStateBuy>
+    </template>
+    <h5 v-else>
+      Unraid OS <em :class="{ 'text-red': stateData.error || state === 'EEXPIRED' }"><strong>{{ stateData.humanReadable }}</strong></em>
+    </h5>
 
-  <template v-if="stateData.actions.includes('purchase')">
-    <button
-      @click="console.log('TODO-PURCHASE_LINK')"
-      class="link text-orange-dark ml-3"
-      :title="'Purchase'"
-    >{{ 'Purchase' }}</button>
-  </template>
+    <template v-if="purchaseAction">
+      <UpcServerStateBuy
+        @click="purchaseAction.click()"
+        class="text-orange-dark"
+        :title="'Purchase'"
+      >{{ 'Purchase' }}</UpcServerStateBuy>
+    </template>
+  </span>
 </template>
-
-
-<style lang="postcss" scoped>
-.link {
-  @apply text-sm font-semibold transition-colors duration-150 ease-in-out border-t-0 border-l-0 border-r-0 border-b-2 border-transparent;
-}
-
-.link:hover,
-.link:focus {
-  /* @apply text-alpha; */
-  @apply border-orange-dark;
-}
-
-.link:focus {
-  @apply outline-none;
-}
-</style>

components/UserProfile/ServerStateBuy.vue

@@ -0,0 +1,6 @@
+
+<template>
+  <button class="text-sm font-semibold transition-colors duration-150 ease-in-out border-t-0 border-l-0 border-r-0 border-b-2 border-transparent hover:border-orange-dark focus:border-orange-dark focus:outline-none">
+    <slot />
+  </button>
+</template>