101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<template>
|
|
<!-- Corner Sticker Badge -->
|
|
<div
|
|
v-if="type === 'sticker'"
|
|
class="absolute top-2 right-2 z-10"
|
|
:title="title"
|
|
>
|
|
<div
|
|
class="relative transform rotate-3 hover:rotate-0 transition-transform"
|
|
style="width: 60px; height: 66px"
|
|
>
|
|
<!-- Shield background -->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 1000 1000"
|
|
class="absolute inset-0 w-full h-full drop-shadow-lg"
|
|
>
|
|
<path
|
|
d="M500 70 150 175.3v217.1C150 785 500 930 500 930s350-145 350-537.6V175.2L500 70Z"
|
|
class="fill-candlelight-500"
|
|
/>
|
|
</svg>
|
|
|
|
<!-- Content on top of shield -->
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<Icon
|
|
name="heroicons:chat-bubble-left-right-solid"
|
|
class="w-6 h-6 text-white"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Sparkle effect -->
|
|
<div
|
|
class="absolute top-0 right-1 w-2 h-2 bg-candlelight-300 rounded-full animate-pulse"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inline Badge -->
|
|
<div
|
|
v-else
|
|
:class="[
|
|
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium transition-all',
|
|
variant === 'default' &&
|
|
'bg-candlelight-900/20 text-candlelight-400 border-candlelight-500/40 hover:bg-candlelight-900/30',
|
|
variant === 'subtle' &&
|
|
'bg-candlelight-900/10 text-candlelight-500 border-candlelight-500/20',
|
|
variant === 'solid' &&
|
|
'bg-candlelight-500 text-white border-candlelight-600 hover:bg-candlelight-600',
|
|
]"
|
|
:title="title"
|
|
>
|
|
<Icon
|
|
name="heroicons:chat-bubble-left-right"
|
|
:class="[
|
|
'w-3.5 h-3.5',
|
|
variant === 'default' && 'text-candlelight-400',
|
|
variant === 'subtle' && 'text-candlelight-500',
|
|
variant === 'solid' && 'text-white',
|
|
]"
|
|
/>
|
|
<span>{{ label }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
/**
|
|
* Badge type - inline or corner sticker
|
|
* @values inline, sticker
|
|
*/
|
|
type: {
|
|
type: String,
|
|
default: "inline",
|
|
validator: (value) => ["inline", "sticker"].includes(value),
|
|
},
|
|
/**
|
|
* Display variant of the badge (for inline type)
|
|
* @values default, subtle, solid
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: "default",
|
|
validator: (value) => ["default", "subtle", "solid"].includes(value),
|
|
},
|
|
/**
|
|
* Custom label text (defaults to "Offering Peer Support")
|
|
*/
|
|
label: {
|
|
type: String,
|
|
default: "Offering Peer Support",
|
|
},
|
|
/**
|
|
* Tooltip/title text
|
|
*/
|
|
title: {
|
|
type: String,
|
|
default: "This member offers 1:1 peer support sessions",
|
|
},
|
|
});
|
|
</script>
|