v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ref: modification components in selfcheckout

Browse source
This commit is contained in:
Luis Felipe Cadavid 2024-09-30 15:17:38 -05:00
parent 251a6a2a6a
commit ab7a02bcca
40 changed files with 1315 additions and 557 deletions
Download patch file Download diff file Expand all files Collapse all files

72
package/components/molecules/NumericPad.tsx
View file

@ -1,69 +1,57 @@
"use client"
import Grid from "@mui/material/Grid2"
import React from "react"
import NumericKey from "@molecules/NumericKey"
"use client";
import Grid from "@mui/material/Grid2";
import React from "react";
import { useTranslation } from "react-i18next";
import NumericKey from "@molecules/NumericKey";
const NumericPad: React.FC = () => {
const handleKeyClick = (key: number) => {
console.log(`Key pressed: ${key}`)
}
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="Cancel"
onClick={() => console.log("Cancel pressed")}
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="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"
label={t("lbl_clear")}
onClick={() => onKeyClick("clear")}
className="h-12 bg-secondary-light text-black"
/>
</Grid>
{[...Array(9).keys()].map((i) => (
<Grid key={i + 1} size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
{" "}
{[...Array(10).keys()].map((i) => (
<Grid key={i} size={{ xs: 4 }} sx={{ minWidth: "100px" }}>
<NumericKey
label={i + 1}
onClick={() => handleKeyClick(i + 1)}
className="size-24 bg-primary-500 text-white hover:bg-primary-600"
label={i}
onClick={() => onKeyClick(i.toString())}
className="h-16 bg-primary-500 text-white hover:bg-primary-600"
/>
</Grid>
))}
<Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
<Grid size={{ xs: 4 }}>
<NumericKey
label="."
onClick={() => console.log(".")}
className="size-24 bg-primary-500 text-white hover:bg-primary-600"
onClick={() => onKeyClick(".")}
className="h-16 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 }}>
<Grid size={{ xs: 4 }}>
<NumericKey
label="Enter"
onClick={() => console.log("Enter pressed")}
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
export default NumericPad;