freefire
d7c6b3a961
- 新增收藏功能：favorite 服务与 handler、FavoriteButton 组件 - 新增关注功能：follow 服务与 handler、FollowButton 组件 - 用户主页适配关注/粉丝与收藏展示 - flash 消息工具、广告与侧边栏组件微调
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { badgeIcon } from "@/lib/badgeIcons";
|
||
import type { Badge } from "@/lib/api";
|
||
|
||
/**
|
||
* 徽章 pill：图标 + 名称，配色由后台设定的 CSS token 决定
|
||
* （color: gold/accent/ok/danger/info/purple/teal → var(--token)）。
|
||
* 仅色板内的值生效，异常值回落 accent。
|
||
*/
|
||
export default function BadgeChip({
|
||
badge,
|
||
tip,
|
||
className = "",
|
||
}: {
|
||
badge: Pick<Badge, "name" | "icon" | "color">;
|
||
/** 悬浮提示（默认徽章名；徽章墙可传名称+授予时间） */
|
||
tip?: string;
|
||
className?: string;
|
||
}) {
|
||
const Icon = badgeIcon(badge.icon);
|
||
const color = `var(--${badge.color}, var(--accent))`;
|
||
const soft = `var(--${badge.color}-soft, var(--accent-soft))`;
|
||
|
||
return (
|
||
<span
|
||
className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-medium leading-[1.5] whitespace-nowrap select-none transition-transform duration-200 hover:-translate-y-[1px] ${className}`}
|
||
style={{ background: soft, color }}
|
||
data-tip={tip ?? badge.name}
|
||
>
|
||
<Icon size={12} className="shrink-0" />
|
||
{badge.name}
|
||
</span>
|
||
);
|
||
}
|