<script setup>
// 接收 props
const props = defineProps({
  title: String,
})

const titleClass = computed(() => {
  // 统一使用主题色
  return 'bg-primary'
})

</script>

<template>
  <div class="relative">
    <!-- 标题部分 -->
    <div :class="titleClass" class="inline-block rounded-lg px-2 py-1 text-white font-bold shadow-md">
      {{ title }}
    </div>

    <!-- 左上角修饰 -->
    <div
      class="absolute left-0 top-0 h-4 w-4 transform rounded-full bg-white shadow-md -translate-x-2 -translate-y-2" />
  </div>
</template>

<style scoped></style>
