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.
35 lines
1.4 KiB
35 lines
1.4 KiB
import React, {Component} from "react";
|
|
import {View, Text, TouchableOpacity, Image} from "react-native";
|
|
import {AntDesign, FontAwesome6} from "@expo/vector-icons";
|
|
import {AntDesignIconNames} from "./Icons";
|
|
import PropTypes, {string} from "prop-types";
|
|
|
|
interface CheckBoxProps {
|
|
label: string;
|
|
value: boolean;
|
|
onChange: () => void;
|
|
icon: AntDesignIconNames | string;
|
|
}
|
|
|
|
const CheckBox: React.FC<CheckBoxProps> = ({ label, value, onChange, icon }) => {
|
|
let AwesomIconList = ["weight-scale", "beer"];
|
|
return (
|
|
<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'} flex-row items-center`}>
|
|
<View className="mr-2.5">
|
|
{AwesomIconList.includes(icon) ? (
|
|
<FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
|
|
) : (
|
|
<AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>
|
|
)}
|
|
</View>
|
|
|
|
<Text className={`${value ? 'text-white' : 'text-black'} flex-1`}>{label}</Text>
|
|
|
|
<View className={`h-5 w-5 rounded border ${value ? 'border-white' : 'border-black'} items-center justify-center mr-2.5`}>
|
|
{value && <View className="h-2 w-2 bg-white" />}
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
export default CheckBox; |