Jennie Robinson Faber
1f7a0f40c0
The commit adds Markdown rendering capabilities and makes several UI/UX improvements across member-related features including profile display, peer support badges, and navigation structure. Includes: - Added @tailwindcss/typography plugin - New Markdown rendering composable - Simplified member navigation links - Enhanced member profile layout and styling - Added peer support badge component - Improved mobile responsiveness - Removed redundant icons and simplified UI
87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<template>
|
|
<!-- Corner Sticker Badge -->
|
|
<div
|
|
v-if="type === 'sticker'"
|
|
class="absolute top-2 right-2 z-10"
|
|
:title="title"
|
|
>
|
|
<div
|
|
class="relative bg-gradient-to-br from-purple-500 to-purple-600 text-white px-3 py-2 rounded-lg shadow-lg border-2 border-purple-400/50 transform rotate-3 hover:rotate-0 transition-transform"
|
|
>
|
|
<div class="flex flex-col items-center gap-0.5">
|
|
<Icon name="heroicons:chat-bubble-left-right-solid" class="w-4 h-4" />
|
|
<span
|
|
class="text-[10px] font-bold uppercase tracking-wide leading-tight"
|
|
>Peer<br />Support</span
|
|
>
|
|
</div>
|
|
<!-- Sparkle effect -->
|
|
<div
|
|
class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-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-purple-500/20 text-purple-300 border-purple-500/40 hover:bg-purple-500/30',
|
|
variant === 'subtle' &&
|
|
'bg-purple-500/10 text-purple-400 border-purple-500/20',
|
|
variant === 'solid' &&
|
|
'bg-purple-500 text-white border-purple-600 hover:bg-purple-600',
|
|
]"
|
|
:title="title"
|
|
>
|
|
<Icon
|
|
name="heroicons:chat-bubble-left-right"
|
|
:class="[
|
|
'w-3.5 h-3.5',
|
|
variant === 'default' && 'text-purple-300',
|
|
variant === 'subtle' && 'text-purple-400',
|
|
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>
|