mirror of
https://github.com/unraid/api.git
synced 2026-05-03 21:50:20 -05:00
Zack Spear
44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { XCircleIcon } from '@heroicons/vue/24/solid';
|
|
export interface Props {
|
|
download?: boolean;
|
|
external?: boolean;
|
|
href?: string;
|
|
icon?: typeof XCircleIcon;
|
|
style?: 'fill' | 'outline';
|
|
text?: string;
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
style: 'fill',
|
|
});
|
|
|
|
defineEmits(['click']);
|
|
|
|
const classes = computed(() => {
|
|
switch (props.style) {
|
|
case 'fill':
|
|
return 'text-white 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';
|
|
case 'outline':
|
|
return 'text-orange-dark bg-gradient-to-r from-transparent to-transparent border border-solid border-orange-dark hover:text-white focus:text-white hover:from-unraid-red hover:to-orange focus:from-unraid-red focus:to-orange hover:border-transparent focus:border-transparent';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="href ? 'a' : 'button'"
|
|
@click="$emit('click')"
|
|
:href="href"
|
|
:rel="external ? 'noopener noreferrer' : ''"
|
|
:target="external ? '_blank' : ''"
|
|
class="text-14px text-center flex-none flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md"
|
|
:class="classes"
|
|
>
|
|
<component v-if="icon" :is="icon" class="flex-shrink-0 w-14px" />
|
|
{{ text }}
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |