index.native
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { THEME_COLORS } from "@/constants/contants";
import { white } from "@/constants/theme";
import { StatusProps } from "@ebh/capsule";
type StatusVariant = "success" | "primary" | "secondary" | "tertiary" | "error" | "caution" | "accent" | "gray" | "info";
const getStatusColors = (variant: StatusVariant, theme: string = "light") => {
const isDark = theme === "dark";
const colors: Record<StatusVariant, { backgroundColor: string; textColor: string }> = {
success: {
backgroundColor: isDark ? THEME_COLORS["success-500"] : THEME_COLORS["success-100"],
textColor: isDark ? white : THEME_COLORS["success-600"],
},
primary: {
backgroundColor: isDark ? THEME_COLORS["primary-500"] : THEME_COLORS["primary-100"],
textColor: THEME_COLORS["gray-600"],
},
secondary: {
backgroundColor: isDark ? THEME_COLORS["secondary-500"] : THEME_COLORS["secondary-100"],
textColor: THEME_COLORS["gray-600"],
},
tertiary: {
backgroundColor: isDark ? THEME_COLORS["tertiary-500"] : THEME_COLORS["tertiary-100"],
textColor: THEME_COLORS["gray-300"],
},
error: {
backgroundColor: isDark ? THEME_COLORS["error-500"] : THEME_COLORS["error-100"],
textColor: isDark ? white : THEME_COLORS["error-600"],
},
caution: {
backgroundColor: isDark ? THEME_COLORS["caution-500"] : THEME_COLORS["caution-100"],
textColor: isDark ? white : THEME_COLORS["caution-600"],
},
accent: {
backgroundColor: isDark ? THEME_COLORS["accent-500"] : THEME_COLORS["accent-100"],
textColor: THEME_COLORS["gray-600"],
},
gray: {
backgroundColor: isDark ? THEME_COLORS["gray-500"] : THEME_COLORS["gray-100"],
textColor: THEME_COLORS["gray-600"],
},
info: {
backgroundColor: isDark ? THEME_COLORS["info-500"] : THEME_COLORS["info-100"],
textColor: isDark ? white : THEME_COLORS["info-600"],
},
};
return colors[variant];
};
const Status: React.FC<StatusProps> = ({ variant, children, rounded, theme }) => {
const { backgroundColor, textColor } = getStatusColors(variant as StatusVariant, theme);
return (
<View style={[styles.statusContainer, { backgroundColor, borderRadius: rounded ? 12 : 0 }]}>
<Text style={[styles.statusText, { color: textColor }]}>{children}</Text>
</View>
);
};
const styles = StyleSheet.create({
statusContainer: {
paddingVertical: 6,
paddingHorizontal: 12,
},
statusText: {
fontSize: 10,
textTransform: "uppercase",
},
});
export default Status;
Comments
Post a Comment