File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import StatusGlyph, { type GlyphKind } from './StatusGlyph'
import { chipClass, glyphOf } from '../codes/tone'
/**
* 상태를 나타내는 태그. 화면 전체가 이 하나만 쓴다.
*
* 생김새의 근거: 오른쪽 위 모서리를 잘라낸 각진 태그 + 왼쪽 컬러 바. 서류 모서리와
* 서식의 항목 표시에서 가져왔다. 알약(rounded-full)을 쓰지 않는 이유는 두 가지다.
* 1) 표 안에서 왼쪽 바가 세로로 정렬돼 눈이 한 줄로 훑고 내려갈 수 있다.
* 2) 이 화면의 모든 상태가 같은 모양이면 색이 유일한 단서가 된다. 모양(글리프)이
* 상태를 함께 담아야 색약 사용자와 흑백 출력에서도 구분된다.
*/
interface Props {
/** 화면에 보이는 글자. 접근성 이름도 이 값이다. */
label: string
/** 코드표의 tone. 색과 글리프가 여기서 파생된다. */
tone?: string | null
/** tone에서 파생된 글리프를 쓰지 않고 직접 지정할 때. */
glyph?: GlyphKind
/** 글리프를 빼고 글자만 보여준다(자리가 아주 좁은 칸). */
bare?: boolean
/** 앞에 붙는 작은 식별자. 단계 번호(①) 같은 것. */
prefix?: string
className?: string
}
/** 오른쪽 위 5px를 잘라낸 모서리. 이 태그의 표식이다. */
const NOTCH = { clipPath: 'polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%)' }
export default function StatusChip({ label, tone, glyph, bare, prefix, className = '' }: Props) {
const kind = glyph ?? glyphOf(tone)
return (
<span
style={NOTCH}
className={`inline-flex items-center gap-1.5 border-l-2 py-[3px] pl-1.5 pr-2 align-middle text-[11px] font-semibold leading-none tracking-tight ${chipClass(
tone,
)} ${className}`}
>
{!bare && <StatusGlyph kind={kind} />}
{prefix && <span className="tabular-nums opacity-70">{prefix}</span>}
{label}
</span>
)
}