48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
/*
|
|
* 카드 — 흰색 서피스 + 1px 테두리(그림자 최소, design.md §1-4 엘리베이션).
|
|
* accent: 'ai'면 좌측 4px 보라 액센트, 'status'면 좌측 4px 상태색.
|
|
*/
|
|
import React from 'react';
|
|
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
|
|
import { colors, radius, spacing } from '../theme';
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
accent?: 'none' | 'ai' | 'warning' | 'error' | 'success';
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
const accentColor: Record<NonNullable<Props['accent']>, string | undefined> = {
|
|
none: undefined,
|
|
ai: colors.aiAccent,
|
|
warning: colors.warning,
|
|
error: colors.error,
|
|
success: colors.success,
|
|
};
|
|
|
|
export function Card({ children, accent = 'none', style }: Props) {
|
|
const left = accentColor[accent];
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.card,
|
|
accent === 'ai' && { backgroundColor: colors.aiSurface },
|
|
left ? { borderLeftWidth: 4, borderLeftColor: left } : null,
|
|
style,
|
|
]}
|
|
>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: colors.white,
|
|
borderWidth: 1,
|
|
borderColor: colors.neutral200,
|
|
borderRadius: radius.md,
|
|
padding: spacing.md,
|
|
},
|
|
});
|