zio
0933dbea41
- (visitor) route group, visitor lib, tickets wallet - CongestionPill + LiveNoticeFeed components - login/tickets screens, i18n 4 locales, wordmark assets, splash Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
/*
|
|
* 혼잡도 필 — 여유(FREE)/보통(NORMAL)/혼잡(BUSY) 3단계.
|
|
* 색 + 텍스트 병기(WCAG: 색만으로 정보 전달 금지). 점유율(%) 선택 노출.
|
|
*/
|
|
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import type { CongestionLevel } from '../lib/types';
|
|
import { colors, radius, type } from '../theme';
|
|
|
|
const LEVEL_STYLE: Record<CongestionLevel, { color: string; bg: string }> = {
|
|
FREE: { color: colors.success, bg: '#E7F6EF' },
|
|
NORMAL: { color: colors.warning, bg: '#FFF7ED' },
|
|
BUSY: { color: colors.error, bg: '#FEF3F2' },
|
|
};
|
|
|
|
export function CongestionPill({
|
|
level,
|
|
label,
|
|
percent,
|
|
size = 'md',
|
|
}: {
|
|
level: CongestionLevel;
|
|
label: string;
|
|
percent?: number | null;
|
|
size?: 'sm' | 'md';
|
|
}) {
|
|
const s = LEVEL_STYLE[level] ?? LEVEL_STYLE.NORMAL;
|
|
const text = percent != null ? `${label} ${percent}%` : label;
|
|
return (
|
|
<View style={[styles.pill, { backgroundColor: s.bg }, size === 'sm' && styles.pillSm]}>
|
|
<View style={[styles.dot, { backgroundColor: s.color }]} />
|
|
<Text style={[styles.text, { color: s.color }, size === 'sm' && styles.textSm]}>{text}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
pill: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 5,
|
|
borderRadius: radius.pill,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
alignSelf: 'flex-start',
|
|
},
|
|
pillSm: { paddingHorizontal: 8, paddingVertical: 2 },
|
|
dot: { width: 7, height: 7, borderRadius: 4 },
|
|
text: { fontSize: type.caption.fontSize, fontWeight: '700' },
|
|
textSm: { fontSize: 11 },
|
|
});
|