From 180dd4b680f7d3b5350ce3920be141d1fb694035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 19 Feb 2022 22:21:25 +0400
Subject: [PATCH] Create Montant component

---
 components/soutyen/montant.js | 44 +++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 components/soutyen/montant.js

diff --git a/components/soutyen/montant.js b/components/soutyen/montant.js
new file mode 100644
index 0000000..5aa69f3
--- /dev/null
+++ b/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
+}