@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
90 lines (89 loc) • 2.28 kB
JavaScript
import { StyleSheet, Platform } from 'react-native';
export const useCardStyles = () => {
const getCardStyle = (elevation, backgroundColor) => {
const baseStyle = {
backgroundColor,
borderRadius: 12,
padding: 16,
marginVertical: 8,
marginHorizontal: 16,
overflow: 'hidden',
};
const shadowStyle = elevation > 0 ? {
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: elevation * 2 },
shadowOpacity: 0.15 + (elevation * 0.05),
shadowRadius: elevation * 3,
},
android: {
elevation: elevation * 2,
},
}),
} : {};
return [baseStyle, shadowStyle];
};
const getTitleStyle = (textColor) => ({
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
color: textColor,
});
const getSubtitleStyle = (textColor) => ({
fontSize: 14,
color: textColor,
marginBottom: 16,
opacity: 0.7,
});
const getImageStyle = () => ({
width: '100%',
height: 200,
borderRadius: 8,
marginBottom: 16,
});
return {
getCardStyle,
getTitleStyle,
getSubtitleStyle,
getImageStyle,
};
};
export const styles = StyleSheet.create({
card: {
backgroundColor: '#fff',
borderRadius: 8,
padding: 16,
marginVertical: 8,
marginHorizontal: 16,
},
elevated: {
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
android: {
elevation: 4,
},
}),
},
image: {
width: '100%',
height: 200,
borderRadius: 8,
marginBottom: 16,
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
},
subtitle: {
fontSize: 14,
color: '#666',
marginBottom: 16,
},
});