73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import { View, Pressable, useColorScheme, useWindowDimensions } from "react-native";
|
|
import { Text } from "@/components/ui/text";
|
|
import { ChevronLeft } from "@/lib/icons";
|
|
|
|
interface KeypadProps {
|
|
onPress: (value: string) => void;
|
|
onDelete: () => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const GAP = 10;
|
|
const H_PADDING = 16;
|
|
|
|
export function Keypad({ onPress, onDelete, disabled }: KeypadProps) {
|
|
const { width: screenWidth } = useWindowDimensions();
|
|
const isDark = useColorScheme() === "dark";
|
|
const keyBg = isDark ? "rgba(255,255,255,0.12)" : "#F4F0EE";
|
|
const iconColor = isDark ? "#f1f5f9" : "#251615";
|
|
const keyW = (screenWidth - H_PADDING * 2 - GAP * 2) / 3;
|
|
|
|
const renderNumKey = (label: string) => (
|
|
<Pressable
|
|
key={label}
|
|
onPress={() => onPress(label)}
|
|
disabled={disabled}
|
|
className="items-center justify-center active:opacity-60"
|
|
style={{ width: keyW, height: 55, borderRadius: 10, backgroundColor: keyBg }}
|
|
>
|
|
<Text className="text-foreground text-xl font-sans-bold">{label}</Text>
|
|
</Pressable>
|
|
);
|
|
|
|
return (
|
|
<View className="items-center pb-4" style={{ paddingHorizontal: H_PADDING }}>
|
|
<View className="flex-row justify-center" style={{ gap: GAP }}>
|
|
{renderNumKey("1")}
|
|
{renderNumKey("2")}
|
|
{renderNumKey("3")}
|
|
</View>
|
|
<View className="flex-row justify-center mt-3" style={{ gap: GAP }}>
|
|
{renderNumKey("4")}
|
|
{renderNumKey("5")}
|
|
{renderNumKey("6")}
|
|
</View>
|
|
<View className="flex-row justify-center mt-3" style={{ gap: GAP }}>
|
|
{renderNumKey("7")}
|
|
{renderNumKey("8")}
|
|
{renderNumKey("9")}
|
|
</View>
|
|
<View className="flex-row justify-center mt-3" style={{ gap: GAP }}>
|
|
<View style={{ width: keyW, height: 55 }} />
|
|
<Pressable
|
|
onPress={() => onPress("0")}
|
|
disabled={disabled}
|
|
className="items-center justify-center active:opacity-60"
|
|
style={{ width: keyW, height: 55, borderRadius: 10, backgroundColor: keyBg }}
|
|
>
|
|
<Text className="text-foreground text-xl font-sans-bold">0</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
onPress={onDelete}
|
|
disabled={disabled}
|
|
className="items-center justify-center active:opacity-60"
|
|
style={{ width: keyW, height: 55, borderRadius: 10, backgroundColor: keyBg }}
|
|
>
|
|
<ChevronLeft size={24} color={iconColor} strokeWidth={2} />
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|