Completed component as well as the tests

workshop/src/App.tsx

@@ -2,7 +2,7 @@ import './App.css';
 import AmountPicker from './components/AmountPicker';
 
 const App = () => {
-  return <AmountPicker></AmountPicker>
+  return (<AmountPicker></AmountPicker>)
 }
 
 export default App;

workshop/src/__tests__/App.test.tsx → workshop/src/__tests__/AmountPicker.test.tsx

 import { render, screen } from '@testing-library/react';
 import AmountPicker from '../components/AmountPicker';
-import App from '../App';
 
 test('Testing + button rendering', () => {
   render(<AmountPicker />)
@@ -12,4 +11,13 @@ test('Testing - button rendering', () => {
   render(<AmountPicker />)
   const decreaseButton = screen.getByRole('button',{name: '-'})
   expect(decreaseButton).toBeInTheDocument()
-});
+});
\ No newline at end of file
+
+test('Testing count rendering', () => {
+  render(<AmountPicker />)
+  const count = screen.getByRole('spinbutton')
+  expect(count).toBeInTheDocument()
+})
+
+
+//Write your test cases below :)

workshop/src/components/AmountPicker.tsx

 import Button from "@mui/material/Button"
 import { useState } from "react"
-import { ButtonGroup, TextField } from "@mui/material"
+import { TextField } from "@mui/material"
 import { Stack } from "@mui/system"
 
 function AmountPicker() {
-    
-    const [count, setCount] = useState(0)
+
+    const min = 1
+    const max = 20
+
+    const [count, setCount] = useState(1)
+    const [withDrawn, setwithDrawn] = useState(0)
 
     const increaseCount = () => {
-        setCount(count + 1)
+        if (count + 1 < max) {
+            setCount(count + 1)
+        } else {
+            setCount(max)
+        }
     }
 
     const decreaseCount = () => {
-        setCount(count - 1)
+        if (count - 1 > min) {
+            setCount(count - 1)
+        } else {
+            setCount(min)
+        }
+    }
+
+    const withDraw = () => {
+        setwithDrawn(withDrawn + count)
     }
 
     return (
         <div>
-            <Stack spacing={3}>
-                <Button onClick={increaseCount} variant="contained">+</Button>
-                    <div>
-                        {count}
-                    </div>
+            <Stack direction="row"
+                spacing={1}
+                alignItems='center'
+                justifyContent='center'
+                sx={{
+                    border: 1
+                }}>
                 <Button onClick={decreaseCount} variant="contained">-</Button>
+                <TextField type="number"
+                    id="count"
+                    value={count}
+                    sx={{
+                        input: { textAlign: 'center' }
+                    }}
+                    onChange={(newValue) => {
+                        if (Number(newValue.target.value) == min) {
+                            setCount(min)
+                        } else if (Number(newValue.target.value) > max) {
+                            setCount(max)
+                        } else {
+                            setCount(Number(newValue.target.value))
+                        }
+                    }
+                    }
+                >
+                </TextField>
+                <Button onClick={increaseCount} variant="contained">+</Button>
+            </Stack>
+            <Stack
+                spacing={1}
+                alignItems='center'
+                justifyContent='center'>
+                <Button
+                    variant="contained"
+                    onClick={withDraw}
+                >
+                    Withdraw current amount
+                </Button>
+                <div>
+                    <p>You have withdrawn </p>
+                    <p>{withDrawn}</p>
+                </div>
             </Stack>
         </div>
     )
 }
 
-export default AmountPicker
+export default AmountPicker
\ No newline at end of file