Untitled

import React from 'react';
import { withPage, usePageState } from '@d-lift/core';
import { Page, Header ,Label, Textbox, Textarea} from '@d-lift/uxcomponents';
import RightSection from '@/Layout/RightSection';
import BodySection from '@/Layout/BodySection';
import Questionnaire from '../Components/Questionnaire';

const Home = ({ UXPage, config }) => {
    return (
        <Page>
            <div className="d-flex ">
                <BodySection>
                    <Header size="3" labelKey="request_header"></Header>
                    <Label className="bold-font pt-5" labelKey="cc"></Label>
                    <Textbox name="cc" model="RFIRequest.cc"> </Textbox>

                    <Label className="bold-font" labelKey="request_desc" > </Label>
                    <Textarea id="noresize" maxLength="100" model="textarea" rows="5" wrap="hard" model="RFIRequest.desc">
                        {' '}
                    </Textarea>
                    <Questionnaire></Questionnaire>
                </BodySection>

                <RightSection></RightSection>
            </div>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Home Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
        TemplateOptions: { cardWorkFlow: true },
    },
    Home,
);

//code for Questionnaire starts from here

import React, { useState } from 'react';
import { Textarea, Textbox, Card, Label, Button, Group } from '@d-lift/uxcomponents';

const Questionnaire = () => {
    const [questions, setQuestions] = useState([{ question: '', description: '' }]); //Initializes an array with single obj with ques and desc field

    const handleAddQuestion = () => {
        setQuestions([...questions, { question: '', description: '' }]);
    };//it spreads the current questions array and adds a new obj with ques and desc field

    const handleInputChange = (index, event) => {
        const { name, value } = event.target;
        const newQuestions = [...questions];
        newQuestions[index][name] = value;
        setQuestions(newQuestions);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Submitted data', questions);
    };

    return (
        <div>
            {questions.map((q, index) => (
                <Card key={index} className="pb-4">
                    <Label className="bold-font"> Question {index + 1} :</Label>
                    <Textbox
                        name="question"
                        value={q.question}
                        onChange={(e) => handleInputChange(index, e)}></Textbox>

                    <Label className="bold-font" labelKey="request_desc">
                        Description:
                    </Label>
                    <Textarea
                        id="noresize"
                        maxLength="100"
                        rows="5"
                        wrap="hard"
                        name="description"
                        value={q.description}
                        onChange={(e) => handleInputChange(index, e)}></Textarea>
                </Card>
            ))}

            <Group>
                <Button
                    id="addQues-btn"
                    className="green-button"
                    onClick={handleAddQuestion}
                    labelKey="addQues_btn"></Button>

                <Button
                    id="submit-btn"
                    className="green-button"
                    onClick={handleSubmit}
                    labelKey="submit_btn"></Button>
            </Group>
        </div>
    );
};

export default Questionnaire;