87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import { View } from "react-native";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Text } from "~/components/ui/text";
|
|
import { LucideChevronLeft } from "lucide-react-native";
|
|
|
|
interface PhonePinKeypadProps {
|
|
onKeyPress: (value: string) => void;
|
|
showDecimal?: boolean;
|
|
}
|
|
|
|
export const PhonePinKeypad: React.FC<PhonePinKeypadProps> = ({
|
|
onKeyPress,
|
|
showDecimal = false,
|
|
}) => {
|
|
const keySizeClasses = "w-28 h-10 mx-2 my-2";
|
|
const baseKeyClasses = `${keySizeClasses} bg-[#eee] items-center justify-center`;
|
|
|
|
const renderNumberKey = (label: string) => (
|
|
<Button
|
|
key={label}
|
|
className={baseKeyClasses}
|
|
style={{ borderRadius: 10 }}
|
|
onPress={() => onKeyPress(label)}
|
|
>
|
|
<Text className="text-2xl font-dmsans-bold text-black">{label}</Text>
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<View className="w-full items-center">
|
|
{/* Row 1: 1, 2, 3 */}
|
|
<View className="flex-row justify-center">
|
|
{renderNumberKey("1")}
|
|
{renderNumberKey("2")}
|
|
{renderNumberKey("3")}
|
|
</View>
|
|
|
|
{/* Row 2: 4, 5, 6 */}
|
|
<View className="flex-row justify-center">
|
|
{renderNumberKey("4")}
|
|
{renderNumberKey("5")}
|
|
{renderNumberKey("6")}
|
|
</View>
|
|
|
|
{/* Row 3: 7, 8, 9 */}
|
|
<View className="flex-row justify-center">
|
|
{renderNumberKey("7")}
|
|
{renderNumberKey("8")}
|
|
{renderNumberKey("9")}
|
|
</View>
|
|
|
|
{/* Row 4: decimal/empty, 0, backspace */}
|
|
<View className="flex-row justify-center">
|
|
{showDecimal ? (
|
|
<Button
|
|
className={baseKeyClasses}
|
|
style={{ borderRadius: 10 }}
|
|
onPress={() => onKeyPress(".")}
|
|
>
|
|
<Text className="text-2xl font-dmsans-bold text-black">.</Text>
|
|
</Button>
|
|
) : (
|
|
<View className={keySizeClasses} style={{ borderRadius: 10 }} />
|
|
)}
|
|
|
|
<Button
|
|
className={baseKeyClasses}
|
|
style={{ borderRadius: 10 }}
|
|
onPress={() => onKeyPress("0")}
|
|
>
|
|
<Text className="text-2xl font-dmsans-bold text-black">0</Text>
|
|
</Button>
|
|
|
|
<Button
|
|
className={baseKeyClasses}
|
|
style={{ borderRadius: 10 }}
|
|
onPress={() => onKeyPress("backspace")}
|
|
onLongPress={() => onKeyPress("clear")}
|
|
>
|
|
<LucideChevronLeft size={24} color="black" />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|