Create Montant component

components/soutyen/montant.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import Typography from '@mui/material/Typography'
+import {Box} from '@mui/material'
+
+export default function Montant({selectedMontant, setSelectedMontant, validMontant, prices}) {
+  const handleChange = (event, newMontant) => {
+    setSelectedMontant(newMontant)
+  }
+
+  return (
+    <Box>
+      <Typography marginTop={1} variant='caption' component='div'>
+        Choisir un montant
+      </Typography>
+      <ToggleButtonGroup
+        exclusive
+        disabled={Boolean(validMontant)}
+        size='large'
+        color='primary'
+        value={selectedMontant}
+        onChange={handleChange}
+      >
+        {prices.map(r => (
+          <ToggleButton key={r.id} value={r.id}>{r.unit_amount / 100} €</ToggleButton>
+        ))}
+
+      </ToggleButtonGroup>
+    </Box>
+  )
+}
+
+Montant.defaultProps = {
+  selectedMontant: null,
+  validMontant: null
+}
+
+Montant.propTypes = {
+  selectedMontant: PropTypes.string,
+  setSelectedMontant: PropTypes.func.isRequired,
+  validMontant: PropTypes.string,
+  prices: PropTypes.array.isRequired
+}