kintex/mobile/components/StatusBadge.tsx

46 lines
1.5 KiB
TypeScript

/*
* 상태 배지 — 신청 흐름 상태 색 매핑(design.md §1-4).
* 작성중(회색)→제출됨(파랑)→AI검토(보라)→승인(녹색)→반려(빨강)→시공중→검수완료.
*/
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, type } from '../theme';
export type Status =
| 'draft'
| 'submitted'
| 'ai_review'
| 'approved'
| 'rejected'
| 'in_construction'
| 'inspected';
const meta: Record<Status, { label: string; color: string; bg: string }> = {
draft: { label: '작성중', color: colors.neutral700, bg: colors.neutral050 },
submitted: { label: '제출됨', color: colors.white, bg: colors.primary600 },
ai_review: { label: 'AI검토', color: colors.white, bg: colors.aiAccent },
approved: { label: '승인', color: colors.white, bg: colors.success },
rejected: { label: '반려', color: colors.white, bg: colors.error },
in_construction: { label: '시공중', color: colors.white, bg: colors.primary700 },
inspected: { label: '검수완료', color: colors.white, bg: colors.success },
};
export function StatusBadge({ status }: { status: Status }) {
const m = meta[status];
return (
<View style={[styles.badge, { backgroundColor: m.bg }]}>
<Text style={[styles.text, { color: m.color }]}>{m.label}</Text>
</View>
);
}
const styles = StyleSheet.create({
badge: {
alignSelf: 'flex-start',
paddingHorizontal: 10,
paddingVertical: 3,
borderRadius: radius.pill,
},
text: { fontSize: type.caption.fontSize, fontWeight: '600' },
});