31 lines
1006 B
Vue
31 lines
1006 B
Vue
<script setup lang="ts">
|
|
import { Check, CircleAlert, LoaderCircle } from 'lucide-vue-next';
|
|
import type { InlineSaveStatusProps } from '@/types';
|
|
|
|
withDefaults(defineProps<InlineSaveStatusProps>(), {
|
|
error: '',
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="state !== 'idle' || error"
|
|
class="flex items-center gap-1.5 pt-1 text-[11px]"
|
|
>
|
|
<template v-if="state === 'saving'">
|
|
<LoaderCircle class="text-muted-foreground size-3 animate-spin" />
|
|
<span class="text-muted-foreground">Saving</span>
|
|
</template>
|
|
<template v-else-if="state === 'saved'">
|
|
<Check class="text-primary size-3" />
|
|
<span class="text-primary">Saved</span>
|
|
</template>
|
|
<template v-else-if="state === 'error' || error">
|
|
<CircleAlert class="text-destructive size-3" />
|
|
<span class="text-destructive">{{
|
|
error || 'Could not save.'
|
|
}}</span>
|
|
</template>
|
|
</div>
|
|
</template>
|