You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.9 KiB
83 lines
1.9 KiB
import React from "react";
|
|
import { View, Text, TouchableOpacity } from "react-native";
|
|
import {
|
|
AntDesign,
|
|
Entypo,
|
|
FontAwesome6,
|
|
MaterialCommunityIcons,
|
|
} from "@expo/vector-icons";
|
|
import {
|
|
AntDesignIconNames,
|
|
CommunityIconNames,
|
|
EntypoIconNames,
|
|
FontAwesomeIconNames,
|
|
} from "./Icons";
|
|
|
|
interface CheckButtonProps {
|
|
label: string;
|
|
value: boolean;
|
|
onChange: () => void;
|
|
antIcon?: AntDesignIconNames;
|
|
entypoIcon?: EntypoIconNames;
|
|
fontAwesomeIcon?: FontAwesomeIconNames;
|
|
communityIcon?: CommunityIconNames;
|
|
}
|
|
|
|
const CheckButton: React.FC<CheckButtonProps> = ({
|
|
label,
|
|
value,
|
|
onChange,
|
|
antIcon,
|
|
entypoIcon,
|
|
fontAwesomeIcon,
|
|
communityIcon,
|
|
}) => {
|
|
return (
|
|
<View style={{ flexBasis: "33.33%" }}>
|
|
<TouchableOpacity
|
|
onPress={onChange}
|
|
className={`p-5 m-1 rounded-3xl ${
|
|
value
|
|
? "bg-orange-600 border-4 border-orange-300"
|
|
: "bg-gray-300 border-4 border-gray-300"
|
|
} items-center`}
|
|
>
|
|
{antIcon ? (
|
|
<AntDesign
|
|
name={antIcon}
|
|
size={30}
|
|
color={value ? "white" : "black"}
|
|
/>
|
|
) : null}
|
|
{entypoIcon ? (
|
|
<Entypo
|
|
name={entypoIcon}
|
|
size={30}
|
|
color={value ? "white" : "black"}
|
|
/>
|
|
) : null}
|
|
{communityIcon ? (
|
|
<MaterialCommunityIcons
|
|
name={communityIcon}
|
|
size={30}
|
|
color={value ? "white" : "black"}
|
|
/>
|
|
) : null}
|
|
{fontAwesomeIcon ? (
|
|
<FontAwesome6
|
|
name={fontAwesomeIcon}
|
|
size={30}
|
|
color={value ? "white" : "black"}
|
|
/>
|
|
) : null}
|
|
|
|
<Text className={`${value ? "text-white" : "text-black"}`}>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CheckButton;
|