98 lines
2.3 KiB
TypeScript
98 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Text,
|
|
Pressable,
|
|
StyleSheet,
|
|
ViewStyle,
|
|
TextStyle,
|
|
} from "react-native";
|
|
import {Palette} from "@/constants/palette";
|
|
import { FunnelSans } from "@/constants/fonts";
|
|
import { Radius, Spacing } from "@/constants/styles";
|
|
|
|
type ButtonVariant = "primary" | "secondary";
|
|
|
|
interface ButtonProps {
|
|
variant?: ButtonVariant;
|
|
title: string;
|
|
style?: ViewStyle;
|
|
textStyle?: TextStyle;
|
|
onPress?: () => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
// 👉 Variant styles (scalable)
|
|
const variantStyles = {
|
|
primary: {
|
|
container: {
|
|
backgroundColor: Palette.black,
|
|
borderColor: Palette.transparent,
|
|
},
|
|
text: {
|
|
color: Palette.white,
|
|
},
|
|
},
|
|
secondary: {
|
|
container: {
|
|
backgroundColor: Palette.transparent,
|
|
borderColor: Palette.black,
|
|
},
|
|
text: {
|
|
color: Palette.white,
|
|
},
|
|
},
|
|
};
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
variant = "primary",
|
|
title,
|
|
style,
|
|
textStyle,
|
|
onPress,
|
|
disabled = false,
|
|
}) => {
|
|
const currentVariant = variantStyles[variant];
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
disabled={disabled}
|
|
style={[
|
|
styles.base,
|
|
currentVariant.container,
|
|
disabled && styles.disabled,
|
|
style,
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.text,
|
|
currentVariant.text,
|
|
textStyle,
|
|
]}
|
|
>
|
|
{title}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
export default Button;
|
|
|
|
const styles = StyleSheet.create({
|
|
base: {
|
|
paddingVertical: 10,
|
|
paddingHorizontal: Spacing.md,
|
|
borderRadius: Radius.md,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderWidth: 1,
|
|
},
|
|
text: {
|
|
...FunnelSans.medium16,
|
|
},
|
|
disabled: {
|
|
opacity: 0.5,
|
|
},
|
|
});
|