78 lines
1.5 KiB
TypeScript
78 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
|
|
import { useTheme } from "../contexts/ThemeContext";
|
|
|
|
type IconContainerVariant = "plain" | "subtle" | "colored";
|
|
type IconContainerSize = "sm" | "md" | "lg" | "xl";
|
|
|
|
interface IconContainerProps {
|
|
children: React.ReactNode;
|
|
variant?: IconContainerVariant;
|
|
size?: IconContainerSize;
|
|
backgroundColor?: string;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
export function IconContainer({
|
|
children,
|
|
variant = "subtle",
|
|
size = "md",
|
|
backgroundColor,
|
|
style,
|
|
}: IconContainerProps) {
|
|
const { colors } = useTheme();
|
|
|
|
const sizeStyles: Record<IconContainerSize, ViewStyle> = {
|
|
sm: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 10,
|
|
},
|
|
md: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 14,
|
|
},
|
|
lg: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 16,
|
|
},
|
|
xl: {
|
|
width: 64,
|
|
height: 64,
|
|
borderRadius: 18,
|
|
},
|
|
};
|
|
|
|
const getBackgroundColor = (): string | undefined => {
|
|
if (variant === "colored" && backgroundColor) {
|
|
return backgroundColor;
|
|
}
|
|
if (variant === "subtle") {
|
|
return colors.surfaceElevated;
|
|
}
|
|
return "transparent";
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.container,
|
|
sizeStyles[size],
|
|
{ backgroundColor: getBackgroundColor() },
|
|
style,
|
|
]}
|
|
>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
});
|