Application Laravel 12 + Inertia + Vue 3 + Tailwind. Fonctionnalités : dashboard glycémique, saisie de mesures, courbe SVG, statistiques (jour/semaine/mois/trimestre), défis & badges, chat coach IA (Gemini), paramètres profil avec palette de couleurs, pages auth redessinées, emails transactionnels via Resend avec thème Diabetix. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
22 lines
836 B
Vue
22 lines
836 B
Vue
<script setup>
|
|
defineProps({
|
|
icon: String,
|
|
label: String,
|
|
unlocked: { type: Boolean, default: false },
|
|
tok: { type: Object, required: true },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:5px;">
|
|
<div :style="{
|
|
width: '46px', height: '46px', borderRadius: '50%',
|
|
background: unlocked ? tok.light : tok.bgAlt,
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px',
|
|
filter: unlocked ? 'none' : 'grayscale(1) opacity(0.35)',
|
|
border: '2px solid ' + (unlocked ? tok.primary : tok.border),
|
|
}">{{ icon }}</div>
|
|
<span :style="{ fontSize: '9px', color: tok.muted, textAlign: 'center', lineHeight: 1.2, maxWidth: '52px' }">{{ label }}</span>
|
|
</div>
|
|
</template>
|