51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
|
// components/molecules/ProductSearch.tsx
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
import { Box } from '@mui/material';
|
||
|
|
import Grid from '@mui/material/Grid2';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import Button from '@atoms/Button';
|
||
|
|
import Input from '@atoms/Input';
|
||
|
|
|
||
|
|
interface ProductSearchProps {
|
||
|
|
onSearch: (plu: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProductSearch: React.FC<ProductSearchProps> = ({ onSearch }) => {
|
||
|
|
const [plu, setPlu] = useState('');
|
||
|
|
const { t } = useTranslation()
|
||
|
|
|
||
|
|
|
||
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
setPlu(e.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
onSearch(plu);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ p:1, mb: 1, boxShadow: '4' }}>
|
||
|
|
<Grid container spacing={3} alignItems="center">
|
||
|
|
<Grid size={{xs:8}}>
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
value={plu}
|
||
|
|
placeholder={t("msj_enter_plu")}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
onKeyDown={handleKeyDown}
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{xs:4}}>
|
||
|
|
<Button label={t("lbl_search")} variant="primary" onClick={() => onSearch(plu)} />
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProductSearch;
|