Untitled

import { Helmet } from 'react-helmet-async';
// @mui
import { Grid, Button, Container, Stack, Typography, Input , Form, TextField} from '@mui/material';
// components
import Iconify from '../components/iconify';

const PROMPTS=[
    
  {"Personal Information":
  [
  "Full name?",
  "Email address?",
  "Phone number?",
  "Mailing address?",
  "Professional website/portfolio URL?",
],
"Education":
[
  "Highest level of education?",
  "Institution name?",
  "Major/field of study?",
  "Notable academic achievements/projects?",
],
"Professional Affiliations":
[
"Member of any professional organizations/associations?",
"Held leadership roles within these organizations?",
"Contributions to industry publications/conferences?",
],
"References":
[
"Contact information for professional references?",
"Individuals who can speak to your skills and work ethic?",
],
  "Professional Summary or Objective":
  [
  "Describe your professional background and expertise briefly.",
  "What are your career objectives?",
  ],
  "Work Experience":
  [
  "Current/most recent job title?",
  "Current/past employer names?",
  "Key responsibilities and achievements?",
  "Total years of work experience?",
  ],
  "Skills":
  [
  "Key technical skills?",
  "Proficient software tools/programming languages?",
  "Relevant soft or transferable skills?",
  "Fluency in foreign languages?",
  ],
  "Projects":
  [
  "Describe significant projects you've worked on.",
  "Your role in those projects?",
  "Objectives and outcomes?",
  "Recognitions or awards received?",
  ],
  "Achievements and Awards":
  [
  "Any professional awards or honors received?",
  "Recognitions for outstanding performance?",
  "Participation in competitions or contests?",
  ],
  }
  ]

const handleClick = (e) => {
  const i=e.currentTarget.getAttribute("data")
  const input=document.getElementById(i).value;
  const outputfield=document.getElementById(`R${i}`)
  const output="ah"
};

export default function PromptPage() {
  return (
    <>
      <Helmet>
        <title> Dashboard: Answer prompts | Minimal UI </title>
      </Helmet>
      
      <Container>
      <Grid>
      {PROMPTS.map((prompt) => (
        <Grid item xs={12} sm={6} md={3}>
          {/* this is how you comment apparently */}

          <Typography variant="h3">{prompt}</Typography>

          <Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
            
            <TextField margin="" size="Big" id={PROMPTS.indexOf(prompt).toString()} fullWidth>Input</TextField>
            <Button variant="contained" data={PROMPTS.indexOf(prompt).toString()} onClick={handleClick} startIcon={<Iconify icon="eva:plus-fill" />}>
              Enhance
            </Button>
          </Stack>
        
        <Stack direction="column">
          <Typography id={`R${PROMPTS.indexOf(prompt).toString()}`}>Generated Bullet points:</Typography>
        </Stack>
        </Grid>
        
      ))}
      </Grid>
      </Container>
    </>
  );
}