38 lines
970 B
TypeScript
38 lines
970 B
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
|
|
export type PillProps = Omit<HTMLAttributes<HTMLSpanElement>, "className"> & {
|
|
children: ReactNode;
|
|
className?: string;
|
|
size?: "sm" | "md";
|
|
weight?: "medium" | "semibold" | "none";
|
|
inlineFlex?: boolean;
|
|
};
|
|
|
|
export function Pill({
|
|
children,
|
|
className = "",
|
|
size = "md",
|
|
weight = "medium",
|
|
inlineFlex = false,
|
|
...rest
|
|
}: PillProps) {
|
|
return (
|
|
<span
|
|
className={[
|
|
"rounded-full break-keep",
|
|
inlineFlex && "inline-flex items-center",
|
|
size === "sm" ? "px-2 py-1" : "px-3 py-1",
|
|
weight === "semibold" ? "font-semibold" : weight === "medium" ? "font-medium" : "",
|
|
"label-12",
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
{...rest}
|
|
>
|
|
{/* 배경·테두리는 바깥 span, WebKit 글자 채움은 안쪽만 solid-text-paint */}
|
|
<span className="solid-text-paint">{children}</span>
|
|
</span>
|
|
);
|
|
}
|