35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
/*
|
|
* 알림 배너 — degraded(서버 미구현/오프라인 폴백)·warning·error·info 공용.
|
|
*/
|
|
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import { colors, radius, type } from '../theme';
|
|
|
|
type Tone = 'info' | 'warning' | 'error' | 'degraded';
|
|
|
|
const toneColor: Record<Tone, { border: string; bg: string; text: string }> = {
|
|
info: { border: colors.primary600, bg: colors.primary050, text: colors.primary700 },
|
|
warning: { border: colors.warning, bg: '#FFF7ED', text: colors.warning },
|
|
error: { border: colors.error, bg: '#FEF3F2', text: colors.error },
|
|
degraded: { border: colors.neutral500, bg: colors.neutral050, text: colors.neutral700 },
|
|
};
|
|
|
|
export function Banner({ tone = 'info', children }: { tone?: Tone; children: React.ReactNode }) {
|
|
const c = toneColor[tone];
|
|
return (
|
|
<View style={[styles.banner, { borderColor: c.border, backgroundColor: c.bg }]}>
|
|
<Text style={[styles.text, { color: c.text }]}>{children}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
banner: {
|
|
borderWidth: 1,
|
|
borderRadius: radius.md,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
},
|
|
text: { fontSize: type.body.fontSize, fontWeight: '500' },
|
|
});
|