File size: 1,436 Bytes
71638d4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import React from 'react';
import { View, StyleSheet, ViewStyle } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { colors, borderRadius, shadows } from '../../theme';
interface CardProps {
children: React.ReactNode;
variant?: 'default' | 'glass' | 'gradient';
style?: ViewStyle;
}
export function Card({ children, variant = 'default', style }: CardProps) {
if (variant === 'gradient') {
return (
<LinearGradient
colors={[colors.background.secondary, colors.background.tertiary]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={[styles.container, styles.gradient, shadows.md, style]}
>
{children}
</LinearGradient>
);
}
if (variant === 'glass') {
return (
<View style={[styles.container, styles.glass, style]}>
{children}
</View>
);
}
return (
<View style={[styles.container, styles.default, shadows.sm, style]}>
{children}
</View>
);
}
const styles = StyleSheet.create({
container: {
borderRadius: borderRadius.lg,
padding: 16,
},
default: {
backgroundColor: colors.background.card,
borderWidth: 1,
borderColor: colors.border.light,
},
glass: {
backgroundColor: colors.glass.background,
borderWidth: 1,
borderColor: colors.glass.border,
},
gradient: {
borderWidth: 1,
borderColor: colors.border.accent,
},
});
|