41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import type { HTMLAttributes } from "react";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* 徽章变体，对应 DESIGN.md 的 badge-* 组件：
|
|
* - tag → badge-tag（文章标签，蓝色 + 半透明底）
|
|
* - type → badge-type（代码风格的类型标记）
|
|
* - discount → badge-discount（品牌绿强调）
|
|
* - required → badge-required（错误红，大写微标签）
|
|
* - neutral → 中性灰，用于日期 / 阅读时长等元信息
|
|
*/
|
|
export const badgeVariants = cva(
|
|
"inline-flex items-center gap-[4px] whitespace-nowrap rounded-sm leading-none",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
tag: "bg-brand-tag/15 text-brand-tag text-caption font-semibold px-xs py-[3px]",
|
|
type: "bg-surface text-steel font-mono text-code-sm px-xs py-[3px]",
|
|
discount: "bg-brand-green text-primary text-caption font-semibold rounded-full px-xs py-[3px]",
|
|
required:
|
|
"bg-brand-error text-on-dark text-micro-uppercase font-semibold px-[6px] py-[3px]",
|
|
neutral: "bg-surface text-steel text-caption px-xs py-[3px]",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "neutral",
|
|
},
|
|
},
|
|
);
|
|
|
|
export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
|
|
VariantProps<typeof badgeVariants>;
|
|
|
|
/** 徽章 / 标签 */
|
|
export function Badge({ className, variant, ...props }: BadgeProps) {
|
|
return (
|
|
<span className={cn(badgeVariants({ variant }), className)} {...props} />
|
|
);
|
|
}
|