parent
53a8e1b0f2
commit
edf3ec383d
@ -1,29 +1,67 @@
|
||||
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 {
|
||||
AntDesign,
|
||||
Entypo,
|
||||
FontAwesome6,
|
||||
MaterialCommunityIcons,
|
||||
} from "@expo/vector-icons";
|
||||
import {
|
||||
AntDesignIconNames,
|
||||
CommunityIconNames,
|
||||
EntypoIconNames,
|
||||
FontAwesomeIconNames,
|
||||
} from "./Icons";
|
||||
|
||||
interface CheckButtonProps {
|
||||
label: string;
|
||||
value: boolean;
|
||||
onChange: () => void;
|
||||
icon: AntDesignIconNames | string;
|
||||
antIcon?: AntDesignIconNames;
|
||||
entypoIcon?: EntypoIconNames;
|
||||
fontAwesomeIcon?: FontAwesomeIconNames;
|
||||
communityIcon?: CommunityIconNames;
|
||||
}
|
||||
|
||||
const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, icon }) => {
|
||||
let AwesomIconList = ["weight-scale", "beer"];
|
||||
const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, antIcon,
|
||||
entypoIcon,
|
||||
fontAwesomeIcon,
|
||||
communityIcon, }) => {
|
||||
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-basis-1/3 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>
|
||||
<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'} flex-1`}>{label}</Text>
|
||||
<Text className={`${value ? 'text-white' : 'text-black'}`}>{label}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in new issue