54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { View, Pressable, type ViewStyle } from "react-native";
|
|
import { useTheme } from "../theme";
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
style?: ViewStyle;
|
|
onPress?: () => void;
|
|
variant?: "default" | "elevated" | "outlined";
|
|
}
|
|
|
|
export function Card({ children, style, onPress, variant = "default" }: CardProps) {
|
|
const theme = useTheme();
|
|
|
|
const variantStyles: Record<string, ViewStyle> = {
|
|
default: {
|
|
backgroundColor: theme.colors.card,
|
|
borderRadius: theme.radius.lg,
|
|
padding: theme.spacing.md,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.borderLight,
|
|
},
|
|
elevated: {
|
|
backgroundColor: theme.colors.card,
|
|
borderRadius: theme.radius.lg,
|
|
padding: theme.spacing.md,
|
|
...theme.shadows.md,
|
|
},
|
|
outlined: {
|
|
backgroundColor: "transparent",
|
|
borderRadius: theme.radius.lg,
|
|
padding: theme.spacing.md,
|
|
borderWidth: 1.5,
|
|
borderColor: theme.colors.border,
|
|
},
|
|
};
|
|
|
|
if (onPress) {
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={[variantStyles[variant], style]}
|
|
>
|
|
{children}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={[variantStyles[variant], style]}>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|