35 lines
758 B
Vue
35 lines
758 B
Vue
<template>
|
|
<div :class="circleClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
size: {
|
|
type: String,
|
|
default: 'md', // md | lg
|
|
},
|
|
tone: {
|
|
type: String,
|
|
default: 'primary', // primary | neutral
|
|
},
|
|
})
|
|
|
|
const sizeMap: Record<string, string> = {
|
|
md: 'w-16 h-16 text-2xl',
|
|
lg: 'w-20 h-20 text-3xl',
|
|
}
|
|
|
|
const toneMap: Record<string, string> = {
|
|
primary: 'bg-primary/10 text-primary',
|
|
neutral: 'bg-base-200 text-base-content',
|
|
}
|
|
|
|
const circleClass = computed(() => {
|
|
const sizeClass = sizeMap[props.size] || sizeMap.md
|
|
const toneClass = toneMap[props.tone] || toneMap.primary
|
|
return ['rounded-full flex items-center justify-center', sizeClass, toneClass].join(' ')
|
|
})
|
|
</script>
|