70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
|
"use client"
|
||
|
|
import Grid from "@mui/material/Grid2"
|
||
|
|
import React from "react"
|
||
|
|
import NumericKey from "@molecules/NumericKey"
|
||
|
|
|
||
|
|
const NumericPad: React.FC = () => {
|
||
|
|
const handleKeyClick = (key: number) => {
|
||
|
|
console.log(`Key pressed: ${key}`)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Grid container spacing={0.4} justifyContent="center" alignItems="center">
|
||
|
|
<Grid size={{ xs: 6 }}>
|
||
|
|
<NumericKey
|
||
|
|
label="Cancel"
|
||
|
|
onClick={() => console.log("Cancel pressed")}
|
||
|
|
className="h-12 w-full bg-danger-light text-white hover:bg-danger-dark"
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 6 }}>
|
||
|
|
<NumericKey label="clear" onClick={() => console.log("Clear pressed")} className="size-12 bg-secondary-light" />
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
|
||
|
|
<NumericKey
|
||
|
|
label="0"
|
||
|
|
onClick={() => console.log("0")}
|
||
|
|
className="size-24 bg-primary-500 text-white hover:bg-primary-600"
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
{[...Array(9).keys()].map((i) => (
|
||
|
|
<Grid key={i + 1} size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
|
||
|
|
{" "}
|
||
|
|
<NumericKey
|
||
|
|
label={i + 1}
|
||
|
|
onClick={() => handleKeyClick(i + 1)}
|
||
|
|
className="size-24 bg-primary-500 text-white hover:bg-primary-600"
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
))}
|
||
|
|
<Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
|
||
|
|
<NumericKey
|
||
|
|
label="."
|
||
|
|
onClick={() => console.log(".")}
|
||
|
|
className="size-24 bg-primary-500 text-white hover:bg-primary-600"
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
|
||
|
|
<NumericKey label="/" onClick={() => console.log("Divide pressed")} className="size-12 bg-secondary-light" />
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
|
||
|
|
<NumericKey label="QTY" onClick={() => console.log("QTY pressed")} className="size-12 bg-secondary-light" />
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
|
||
|
|
<NumericKey label="Price" onClick={() => console.log("Price pressed")} className="size-12 bg-secondary-light" />
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
|
||
|
|
<Grid size={{ xs: 6 }}>
|
||
|
|
<NumericKey
|
||
|
|
label="Enter"
|
||
|
|
onClick={() => console.log("Enter pressed")}
|
||
|
|
className="h-12 w-full bg-success-light text-white hover:bg-success-dark"
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default NumericPad
|