85 lines
1.6 KiB
TypeScript
85 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
ViewStyle,
|
|
StyleProp,
|
|
} from "react-native";
|
|
import { useTheme } from "../contexts/ThemeContext";
|
|
|
|
type CardVariant = "default" | "elevated" | "bordered" | "gradient";
|
|
|
|
interface MinimalCardProps {
|
|
children: React.ReactNode;
|
|
variant?: CardVariant;
|
|
onPress?: () => void;
|
|
style?: StyleProp<ViewStyle>;
|
|
padding?: number;
|
|
}
|
|
|
|
export function MinimalCard({
|
|
children,
|
|
variant = "default",
|
|
onPress,
|
|
style,
|
|
padding = 20,
|
|
}: MinimalCardProps) {
|
|
const { colors } = useTheme();
|
|
|
|
const cardStyles = [
|
|
styles.base,
|
|
{
|
|
backgroundColor: colors.surface,
|
|
padding: padding,
|
|
},
|
|
variant === "default" && styles.default,
|
|
variant === "elevated" && {
|
|
...styles.elevated,
|
|
backgroundColor: colors.surfaceElevated,
|
|
},
|
|
variant === "bordered" && {
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
},
|
|
variant === "gradient" && {
|
|
backgroundColor: colors.surfaceElevated,
|
|
},
|
|
style,
|
|
];
|
|
|
|
if (onPress) {
|
|
return (
|
|
<TouchableOpacity
|
|
style={cardStyles}
|
|
onPress={onPress}
|
|
activeOpacity={0.85}
|
|
>
|
|
{children}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
return <View style={cardStyles}>{children}</View>;
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
base: {
|
|
borderRadius: 20,
|
|
},
|
|
default: {
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 8,
|
|
elevation: 3,
|
|
},
|
|
elevated: {
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 16,
|
|
elevation: 6,
|
|
},
|
|
});
|