50 lines
828 B
Vue
50 lines
828 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
width: { type: String, default: 'full' },
|
|
height: { type: String, default: '4' },
|
|
rounded: { type: String, default: 'md' },
|
|
});
|
|
|
|
const widthClasses = {
|
|
full: 'w-full',
|
|
'3/4': 'w-3/4',
|
|
'2/3': 'w-2/3',
|
|
'1/2': 'w-1/2',
|
|
'1/3': 'w-1/3',
|
|
'1/4': 'w-1/4',
|
|
'1/5': 'w-1/5',
|
|
auto: 'w-auto',
|
|
};
|
|
|
|
const heightClasses = {
|
|
2: 'h-2',
|
|
3: 'h-3',
|
|
4: 'h-4',
|
|
5: 'h-5',
|
|
6: 'h-6',
|
|
8: 'h-8',
|
|
12: 'h-12',
|
|
};
|
|
|
|
const roundedClasses = {
|
|
none: 'rounded-none',
|
|
sm: 'rounded-sm',
|
|
md: 'rounded-md',
|
|
lg: 'rounded-lg',
|
|
full: 'rounded-full',
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="animate-pulse bg-gray-200"
|
|
:class="[
|
|
widthClasses[width] || width,
|
|
heightClasses[height] || height,
|
|
roundedClasses[rounded] || rounded,
|
|
]"
|
|
></div>
|
|
</template>
|
|
|
|
|