question cleaver mokup

src/App.css

@@ -307,3 +307,6 @@
   justify-content: flex-start;
 }
 
+.checkbox_label_question{
+  font-weight:bold;
+}

src/Components/Test/Cleaver/Question.jsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-// import Box from '@mui/material/Box';
+
 import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
+// import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
+// import Button from '@mui/material/Button';
+// import Typography from '@mui/material/Typography';
+// import Avatar from '@mui/material/Avatar';
 import Checkbox from '@mui/material/Checkbox';
-import { deepPurple } from '@mui/material/colors';
+// import { deepPurple } from '@mui/material/colors';
 
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -15,6 +15,28 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+
+function CheckboxexHeader(prop) {
+  return (
+    <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+      <ListItem>
+        <ListItemButton role={undefined} dense>
+          <ListItemText style={{marginRight :25, color:'silver'}} primary={prop.title} />
+          <ListItemIcon>
+            <AddIcon />
+          </ListItemIcon>
+          <ListItemIcon>
+            <RemoveIcon />
+          </ListItemIcon>
+        </ListItemButton>
+      </ListItem>
+    </List>
+  );
+}
+
 function CheckboxesGroup(props) {
 
   const [checked, setChecked] = React.useState([0]);
@@ -39,7 +61,7 @@ function CheckboxesGroup(props) {
         return (
           <ListItem key={value.id}>
             <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
-              <ListItemText id={labelId} primary={value.nombre} />
+              <ListItemText className="checkbox_label_question" id={labelId} primary={value.nombre} />
               <ListItemIcon>
                 <Checkbox
                   edge="start"
@@ -47,7 +69,7 @@ function CheckboxesGroup(props) {
                   tabIndex={-1}
                   disableRipple
                   inputProps={{ 'aria-labelledby': labelId }}
-                  />
+                />
               </ListItemIcon>
               <ListItemIcon>
                 <Checkbox
@@ -56,7 +78,7 @@ function CheckboxesGroup(props) {
                   tabIndex={-1}
                   disableRipple
                   inputProps={{ 'aria-labelledby': labelId }}
-                  />
+                />
               </ListItemIcon>
             </ListItemButton>
           </ListItem>
@@ -67,11 +89,14 @@ function CheckboxesGroup(props) {
 }
 
 export function Question({ quiz }) {
-  let { instrucciondepregunta, id, respuestas } = quiz
+  console.log('quiz: ', quiz)
+  let { instrucciondepregunta,respuestas } = quiz
   return (
-    <Card sx={{ minWidth: 275, margin: 5 }}>
+
+    <Card sx={{ minWidth: 275, margin: 5 , borderLeft: '5px solid var(--main)'}}>
       <CardContent>
 
+        {/*
         <div sx={{ fontSize: 17 }}>
           <div className="quiz_title_text">
             <Avatar sx={{ bgcolor: deepPurple[500] }}>{id}</Avatar>
@@ -80,15 +105,22 @@ export function Question({ quiz }) {
             </Typography>
           </div>
         </div>
+      */}
 
         <div variant="body2">
-          <CheckboxesGroup quiz={respuestas}/>
+          <List>
+            <CheckboxexHeader title={instrucciondepregunta}/>
+          </List>
+          <CheckboxesGroup quiz={respuestas} />
         </div>
       </CardContent>
 
+        {/*
       <CardActions>
-        <Button size="small">Siguiente Pregunta</Button>
+        <Button variant="contained" size="small">Anterior</Button>
+        <Button variant="contained" size="small">Siguiente</Button>
       </CardActions>
+      */}
 
     </Card>
   );