AchievementCard
AchievementCard forma parte del apartado «Patterns» del kit. Composiciones listas para usar: KPIs, perfiles, precios, eventos, posts y más.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { AchievementCard } from "@tsukira/ui"; export function Ejemplo() { return <AchievementCard />;}Ejemplos#
Los ejemplos detallados de AchievementCard están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en PatternsAPI#
AchievementCardPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
icon | ReactNode | — | Icono central / medalla. |
tone | 'brand' | 'gold' | 'silver' | 'bronze' | 'success' | 'info' | 'danger' | — | Tono del icono y acentos. |
title* | ReactNode | — | Nombre del logro. |
description | ReactNode | — | Descripción corta. |
state | 'earned' | 'locked' | 'inProgress' | — | Estado. |
progress | number | — | Progreso 0..1 (solo si state='inProgress'). |
earnedLabel | ReactNode | — | Texto cuando es 'earned' (ej. "Conseguido el 12 mar"). |
orientation | 'vertical' | 'horizontal' | — | Layout. |