Files
api/web/components/Ui/CardWrapper.vue
2024-12-17 11:48:45 -05:00

32 lines
776 B
Vue

<script setup lang="ts">
withDefaults(defineProps<{
error?: boolean,
hover?: boolean;
increasedPadding?: boolean;
padding?: boolean;
warning?: boolean;
}>(), {
error: false,
hover: true,
increasedPadding: false,
padding: true,
warning: false,
});
</script>
<template>
<div
class="group/card text-left relative flex flex-col flex-1 border-2 border-solid rounded-md shadow-md "
:class="[
padding && 'p-4',
increasedPadding && 'md:p-6',
hover && 'hover:shadow-orange/50 transition-all',
error && 'text-white bg-unraid-red border-unraid-red',
warning && 'text-black bg-yellow-100 border-yellow-100',
!error && !warning && 'text-foreground bg-background border-muted',
]"
>
<slot />
</div>
</template>