35b96042f0
* chore: add storybook * chore: unify FE codeabse * chore: update eslint rules * chore: harmonize the use of "subtle" color * chore: remove an extra sidebar rail * refactor: make panel items more consistent * chore: cleanups after merging new code from base * refactor: refine composables * fix: add lost import * chore: make icon style consistent * fix: don't show empty "supported" methods * refactor: solidify select items
46 lines
1010 B
Vue
46 lines
1010 B
Vue
<script setup lang="ts">
|
|
/**
|
|
* @component AppSpinner
|
|
* @description A simple animated SVG spinner for indicating loading states.
|
|
*/
|
|
import { cn } from '@/utils/ui';
|
|
import { type HTMLAttributes } from 'vue';
|
|
|
|
/*
|
|
* Types & Interfaces.
|
|
*/
|
|
|
|
export interface AppSpinnerProps {
|
|
class?: HTMLAttributes['class'];
|
|
}
|
|
|
|
/*
|
|
* Component Setup.
|
|
*/
|
|
|
|
const props = defineProps<AppSpinnerProps>();
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
:class="cn('size-4 text-zinc-900', props.class)"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
class="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
stroke-width="4"
|
|
></circle>
|
|
<path
|
|
class="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
</template>
|