Added Code Selection Button

src/App.tsx

@@ -16,6 +16,7 @@ import Lesson8 from './pages/Lesson8';
 import Lesson9 from './pages/Lesson9';
 
 import PointerMotivation from './pages/PointerMotivation';
+import Exercise2 from './pages/Exercise2';
 
 function App(): JSX.Element {
   return (
@@ -30,6 +31,7 @@ function App(): JSX.Element {
           <Route path="/lesson-2-2" element={<Lesson2_2 />} />
           <Route path="/lesson-3" element={<Lesson3 />} />
           <Route path="/exercise-1" element={<Exercise1 />} />
+          <Route path="/exercise-2" element={<Exercise2 />} />
           <Route path="/lesson-4" element={<Lesson4 />} />
           <Route path="/lesson-5" element={<Lesson5 />} />
           <Route path="/lesson-6" element={<Lesson6 />} />

src/components/SelectCode.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+import { useState } from "react"
+
+interface SelectCodeProps{
+    choices: string[];
+    handleClick: (value: string) => void;
+}
+
+const SelectCode:React.FC<SelectCodeProps> = (
+{ choices, handleClick }) => {
+    const [display, setDisplay] = useState(choices[0] || "") 
+
+    const handleChange = (e: SelectChangeEvent) => {
+        setDisplay(e.target.value)
+        handleClick(e.target.value)
+    }
+
+    return (
+      <Box sx={{ width: '37.5vw', height: '5vh', fontFamily: 'monospace' }}>
+        <FormControl fullWidth>
+          <Select
+            value={display}
+            onChange={handleChange}
+            displayEmpty
+            inputProps={{ 'aria-label': 'Without label' }}
+            sx={{ fontFamily: "monospace", borderColor: "#CFCFCF", border: '12px' }}
+          >
+            {choices.map((choice, index) => (
+                <MenuItem value={choice} key={index} sx={{fontFamily: "monospace"}}>{choice}</MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Box>
+    );
+}
+
+export default SelectCode

src/pages/Exercise2.tsx

@@ -0,0 +1,22 @@
+import SelectCode from "../components/SelectCode"
+
+const data = [
+    'Basketball **basketballPtrPtr = basketballPtr;',
+    'Basketball **basketballPtrPtr = &basketballPtr;',
+    'Basketball *basketballPtrPtr = *basketballPtr;',
+    'Basketball *basketballPtrPtr = basketballPtr;'
+]
+
+const Exercise2: React.FC = () => {
+    const handleClick = () => {
+        return
+    }
+
+    return(
+        <div style={{display: 'flex', justifyContent: "center", alignItems: "center", minHeight: '100vh'}}>
+            <SelectCode choices={data} handleClick={handleClick}/>
+        </div>
+    )
+}
+
+export default Exercise2