gib/Wavelength
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

We have a sick button component now

Browse Source
This commit is contained in:
Gabriel Brown
2024-10-08 19:40:36 -05:00
parent 3d79e24ffb
commit 8128194488
8 changed files with 83 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/buttons/Button.tsx
View File

@ -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,
},
});