Files
api/web/components/Registration/ReplaceCheck.vue
Michael Datelle 741e8532ab refactor: unraid-ui-web-migration (#1106)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced enhanced stepper components for smoother multi-step
interactions.
- Added new loading indicators and improved the loading experience with
customizable variants.
  
- **UI Improvements**
- Refreshed the global color palette and updated styling across buttons,
badges, and loading indicators for a more modern, consistent experience.
- Improved the organization and readability of templates and styles
across various components.

- **Code & Dependency Updates**
- Updated key dependencies and revised the theme and configuration
settings to improve performance and maintainability.
- Introduced new environment variables for better configuration
management.

- **Legacy Cleanup**
- Removed deprecated components and streamlined registrations to
simplify the codebase without affecting end-user functionality.
- Eliminated unused utility functions and legacy code to enhance overall
code quality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: mdatelle <mike@datelle.net>
Co-authored-by: Eli Bosley <ekbosley@gmail.com>
2025-02-12 18:00:06 -05:00

43 lines
1.3 KiB
Vue

<script setup lang="ts">
import { ArrowTopRightOnSquareIcon, KeyIcon } from '@heroicons/vue/24/solid';
import { Badge, BrandButton } from '@unraid/ui';
import { DOCS_REGISTRATION_REPLACE_KEY } from '~/helpers/urls';
import { useReplaceRenewStore } from '~/store/replaceRenew';
import { storeToRefs } from 'pinia';
import type { ComposerTranslation } from 'vue-i18n';
const replaceRenewStore = useReplaceRenewStore();
const { replaceStatusOutput } = storeToRefs(replaceRenewStore);
defineProps<{
t: ComposerTranslation;
}>();
</script>
<template>
<div class="flex flex-wrap items-center justify-between gap-8px">
<BrandButton
v-if="!replaceStatusOutput"
:icon="KeyIcon"
:text="t('Check Eligibility')"
class="flex-grow"
@click="replaceRenewStore.check"
/>
<Badge v-else :variant="replaceStatusOutput.variant" :icon="replaceStatusOutput.icon" size="md">
{{ t(replaceStatusOutput.text ?? 'Unknown') }}
</Badge>
<span class="inline-flex flex-wrap items-center justify-end gap-8px">
<BrandButton
variant="underline"
:external="true"
:href="DOCS_REGISTRATION_REPLACE_KEY.toString()"
:icon-right="ArrowTopRightOnSquareIcon"
:text="t('Learn More')"
class="text-14px"
/>
</span>
</div>
</template>