Untitled

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

const Home = ({ UXPage, config }) => {
    const [questions, setQuestions] = useState([{ question: '', description: '' }]);

    const handleAddQuestion = () => {
        setQuestions([...questions, { question: '', description: '' }]);
    };

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

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

    return (
        <Page>
            <div className="d-flex">
                <BodySection>
                    <Header size="3" labelKey="request_header"></Header>
                    <Label className="ux-rfi-bold-font pt-5" labelKey="cc"></Label>
                    <Textbox name="cc" model="RFIRequest.cc">
                        {' '}
                    </Textbox>

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

                    {questions.map((q, index) => (
                        <Questionnaire
                            key={index}
                            index={index}
                            question={q.question}
                            description={q.description}
                            onInputChange={handleInputChange}
                        />
                    ))}

                    <div className="pt-4">
                        <Group>
                            <Button
                                id="addQues-btn"
                                className="ux-rfi-green-button"
                                onClick={handleAddQuestion}
                                text="Add Another Question"
                            ></Button>

                            <Button
                                id="submit-btn"
                                className="ux-rfi-green-button"
                                onClick={handleSubmit}
                                text="Submit Request"
                            ></Button>
                        </Group>
                    </div>
                </BodySection>
                <RightSection></RightSection>
            </div>
        </Page>
    );
};

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



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

const Questionnaire = ({ index, question, description, onInputChange }) => {
    return (
        <div className="ux-rfi-green-border mt-4">
            <Label className="ux-rfi-bold-font">Question {index + 1} :</Label>
            <Textbox
                name="question"
                value={question}
                onChange={(e) => onInputChange(index, 'question', e.target.value)}
            ></Textbox>

            <Label className="ux-rfi-bold-font">Description:</Label>
            <Textarea
                id="noresize"
                maxLength="100"
                rows="5"
                wrap="hard"
                name="description"
                value={description}
                onChange={(e) => onInputChange(index, 'description', e.target.value)}
            ></Textarea>
        </div>
    );
};

export default Questionnaire;