Untitled

import React from 'react';
import { withPage, usePageState, useAppState } from '@d-lift/core';
import {
    Card,
    Page,
    MultiSelect,
    Button,
    Modal,
    Para,
    Selectbox,
    Group,
    Label,
    Textarea,
} from '@d-lift/uxcomponents';
import BodySection from '@/Layout/BodySection';
import { useState } from 'react';

const ResponseModal = () => {
    const [openModal, setOpenModal] = useAppState('openModal', false);
    const showResponseModal = () => {
        setOpenModal(!openModal);
    };

    return (
        <div ref-table-list="PROGRAM, CATEGORY, OFFERING, STATE">
            <div className="d-flex">
                <Button click={showResponseModal}>Open Modal</Button>
                <Modal isOpen={openModal}>
                    <Group width="3,5">
                        <Label labelKey="respond_as"></Label>
                        <Selectbox
                            id="respond_as"
                            model="responseModal.respondAs"
                            defaultOptionLabelKey="select_state"
                            ref-table="STATE"
                            defaultOption="true"></Selectbox>
                    </Group>
                    <Label labelKey="response"></Label>
                    <Textarea
                        id="response"
                        maxLength="100"
                        model="responseModal.response"
                        placeholderText="Placeholder text"
                        className="mt-4"
                        validationRules="alphaNumericCheck"
                        errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                        rows="5"
                        wrap="hard"></Textarea>
                    <Group>
                        <Button
                            id=""
                            size="small"
                            className="ux-rfi-white-button-bold float-left mt-3"
                            // click={}
                            labelKey="cancel_btn"></Button>
                        <Button
                            id=""
                            size="small"
                            className="ux-rfi-green-button float-right mt-3"
                            // click={}
                            labelKey="submit_ans_btn"></Button>
                    </Group>
                </Modal>
            </div>
        </div>
    );
};

export default withPage(
    {
        Description: 'Response Modal Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    ResponseModal,
);