We have a sick button component now
This commit is contained in:
@ -3,67 +3,44 @@ import { ThemedText } from "@/components/ThemedText";
|
||||
import { ThemedView } from "@/components/ThemedView";
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import FontAwesome from "@expo/vector-icons/FontAwesome";
|
||||
|
||||
const DEFAULT_WIDTH = 320;
|
||||
const DEFAULT_HEIGHT = 68;
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
theme?: 'primary';
|
||||
width?: number;
|
||||
height?: number;
|
||||
onPress?: () => void;
|
||||
};
|
||||
|
||||
const Button = ({ label, theme, onPress }: Props) => {
|
||||
const Button = ({ width, height, children, onPress }: Props & React.ComponentProps<typeof Pressable>) => {
|
||||
const scheme = useColorScheme() ?? 'light';
|
||||
if (theme === 'primary') {
|
||||
return (
|
||||
<ThemedView style={styles.buttonContainer}>
|
||||
<Pressable
|
||||
style={[
|
||||
styles.button,
|
||||
{backgroundColor: Colors[scheme].text}
|
||||
]}
|
||||
onPress={() => alert('You pressed a button.')}
|
||||
>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.buttonLabel,
|
||||
{color: Colors[scheme].background}
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
</ThemedView>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<ThemedView style={styles.buttonContainer}>
|
||||
<Pressable
|
||||
style={[
|
||||
styles.button,
|
||||
{backgroundColor: Colors[scheme].text}
|
||||
]}
|
||||
onPress={() => alert('You pressed a button.')}
|
||||
>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.buttonLabel,
|
||||
{color: Colors[scheme].background}
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ThemedView
|
||||
style={[
|
||||
styles.buttonContainer,
|
||||
{
|
||||
width: (width ?? DEFAULT_WIDTH),
|
||||
height: (height ?? DEFAULT_HEIGHT),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Pressable
|
||||
style={[
|
||||
styles.button,
|
||||
{backgroundColor: Colors[scheme].text}
|
||||
]}
|
||||
onPress={onPress}
|
||||
>
|
||||
{children}
|
||||
</Pressable>
|
||||
</ThemedView>
|
||||
);
|
||||
};
|
||||
export default Button;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
buttonContainer: {
|
||||
width: 320,
|
||||
height: 68,
|
||||
marginHorizontal: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 3,
|
||||
@ -76,10 +53,4 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
buttonIcon: {
|
||||
paddingRight: 8,
|
||||
},
|
||||
buttonLabel: {
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
|
Reference in New Issue
Block a user