57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
"use client";
|
|
import Grid from "@mui/material/Grid2";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import NumericKey from "@molecules/NumericKey";
|
|
|
|
interface NumericPadProps {
|
|
onKeyClick: (key: string) => void;
|
|
}
|
|
|
|
const NumericPad: React.FC<NumericPadProps> = ({ onKeyClick }) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Grid container spacing={0.4} justifyContent="center" alignItems="center">
|
|
<Grid size={{ xs: 6 }}>
|
|
<NumericKey
|
|
label={t("lbl_cancel")}
|
|
onClick={() => onKeyClick("cancel")}
|
|
className="h-12 w-full bg-danger-light text-white hover:bg-danger-dark"
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 6 }}>
|
|
<NumericKey
|
|
label={t("lbl_clear")}
|
|
onClick={() => onKeyClick("clear")}
|
|
className="h-12 bg-secondary-light text-black"
|
|
/>
|
|
</Grid>
|
|
{[...Array(10).keys()].map((i) => (
|
|
<Grid key={i} size={{ xs: 4 }} sx={{ minWidth: "100px" }}>
|
|
<NumericKey
|
|
label={i}
|
|
onClick={() => onKeyClick(i.toString())}
|
|
className="h-16 bg-primary-500 text-white hover:bg-primary-600"
|
|
/>
|
|
</Grid>
|
|
))}
|
|
<Grid size={{ xs: 4 }}>
|
|
<NumericKey
|
|
label="."
|
|
onClick={() => onKeyClick(".")}
|
|
className="h-16 bg-primary-500 text-white hover:bg-primary-600"
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 4 }}>
|
|
<NumericKey
|
|
label={t("lbl_enter")}
|
|
onClick={() => onKeyClick("enter")}
|
|
className="h-12 w-full bg-success-light text-white hover:bg-success-dark"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default NumericPad;
|