Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 4x 4x | import React from 'react';
import { useTranslation } from 'react-i18next';
import { BlockRow, Stepper } from 'ag-ems-ui-library';
const styles = require('./Faehre.module.css')
const PassengersForm: React.FC<{
data: {
adults: number;
children: number;
babies: number;
dogs: number;
};
handleCountChange?: (value: number, name?: string) => void;
adultsLabel?: string;
}> = ({
handleCountChange,
data = {
adults: 1,
children: 0,
babies: 0,
dogs: 0
},
adultsLabel
}) => {
const { t } = useTranslation();
if (!adultsLabel) adultsLabel = t('cart.adult_plural');
return (
<div className={styles.Passengers}>
<BlockRow>
<div className={styles.Counter}>
<label htmlFor="adults" className={styles.Label}>
{adultsLabel}
<div className="text-muted text-small">
{t('fromYears', { years: 12 })}
</div>
</label>
<div className={styles.Stepper}>
<Stepper
name="adults"
value={data.adults}
minValue={0}
maxValue={100}
manualInput={true}
onChange={handleCountChange}
/>
</div>
</div>
</BlockRow>
<BlockRow>
<div className={styles.Counter}>
<label htmlFor="children" className={styles.Label}>
{t('cart.child_plural')}
<div className="text-muted text-small">
{t('fromAndToYears', { from: 4, to: 11 })}
</div>
</label>
<div className={styles.Stepper}>
<Stepper
name="children"
value={data.children}
minValue={0}
maxValue={100}
manualInput={true}
onChange={handleCountChange}
/>
</div>
</div>
</BlockRow>
<BlockRow>
<div className={styles.Counter}>
<label htmlFor="babies" className={styles.Label}>
{t('cart.baby_plural')}
<div className="text-muted text-small">
{t('underYears', { years: 4 })}
</div>
</label>
<div className={styles.Stepper}>
<Stepper
name="babies"
value={data.babies}
minValue={0}
maxValue={100}
manualInput={true}
onChange={handleCountChange}
/>
</div>
</div>
</BlockRow>
<BlockRow>
<div className={styles.Counter}>
<label htmlFor="dogs" className={styles.Label}>
{t('cart.dog_plural')}
</label>
<div className={styles.Stepper}>
<Stepper
name="dogs"
value={data.dogs}
minValue={0}
maxValue={100}
manualInput={true}
onChange={handleCountChange}
/>
</div>
</div>
</BlockRow>
</div>
);
};
export default PassengersForm;
|