70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React, { useState } from "react";
|
|
import { View, Text, TextInput } from "react-native";
|
|
import styles, { COLORS } from "@/styles/styles";
|
|
import Button from "@/containers/Button";
|
|
|
|
interface BuyInSelectorProps {
|
|
setBuyInAmount: React.Dispatch<React.SetStateAction<number>>;
|
|
selectedCurrency: string; // Accept selectedCurrency as a prop
|
|
}
|
|
|
|
const defaultBuyInOptions = [10, 25, 50];
|
|
|
|
const BuyInSelector: React.FC<BuyInSelectorProps> = ({
|
|
setBuyInAmount,
|
|
selectedCurrency,
|
|
}) => {
|
|
const [customAmount, setCustomAmount] = useState("");
|
|
const [buyInAmount, setBuyInAmountState] = useState<number | null>(null);
|
|
|
|
const handleCustomAmountChange = (value: string) => {
|
|
const numericValue = parseFloat(value);
|
|
if (!isNaN(numericValue) && numericValue >= 0) {
|
|
setCustomAmount(value);
|
|
setBuyInAmountState(numericValue);
|
|
setBuyInAmount(numericValue);
|
|
} else {
|
|
setCustomAmount("");
|
|
setBuyInAmountState(25);
|
|
setBuyInAmount(25);
|
|
}
|
|
};
|
|
|
|
const handleBuyInSelection = (amount: number) => {
|
|
setBuyInAmountState(amount);
|
|
setCustomAmount("");
|
|
setBuyInAmount(amount);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<View style={{ ...styles.container, flexDirection: "row" }}>
|
|
{defaultBuyInOptions.map((amount) => (
|
|
<Button
|
|
key={amount}
|
|
color={buyInAmount === amount ? COLORS.PRIMARY : COLORS.SECONDARY}
|
|
onPress={() => handleBuyInSelection(amount)}
|
|
title={`${selectedCurrency} ${amount}`}
|
|
></Button>
|
|
))}
|
|
</View>
|
|
|
|
<Text style={styles.p}>Or enter a custom amount:</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={customAmount}
|
|
onChangeText={handleCustomAmountChange}
|
|
placeholder="Enter custom buy-in"
|
|
keyboardType="numeric"
|
|
/>
|
|
|
|
<Text style={styles.h2}>
|
|
Selected Buy-in:{" "}
|
|
{buyInAmount !== null ? `${selectedCurrency} ${buyInAmount}` : "None"}
|
|
</Text>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default BuyInSelector;
|