olivegroup-gamified1/components/ItemModal.js

sample des

import React from 'react';
import { Modal, Form } from 'react-bootstrap';

const ItemModal = props => {
  console.log('MODAL');
  console.log('props: ', { ...props });

  return (
    <Modal size="lg" {...props} className="modal-right-side">
      <Modal.Header closeButton>
        {/* <Modal.Title>Add to <strong>New Pathway</strong></Modal.Title> */}
      </Modal.Header>
      <Modal.Body>
        <Form>
          {['radio'].map(type => (
            <div
              key={type}
              className="custom-radio mb-3 d-flex justify-content-between"
            >
              <Form.Check.Label className="w-100 me-2">
                <Form.Check
                  type={type}
                  id={`check-api-${type}`}
                  inline
                  className="d-flex justify-content-start align-items-center"
                >
                  <Form.Check.Input type={type} isValid name="group1" />
                  <Form.Control.Feedback type="valid">
                    <h5>
                      Add <strong>New Section</strong>
                    </h5>
                    <h6 className="gray-400">
                      Choose the below field and create new section
                    </h6>
                  </Form.Control.Feedback>
                </Form.Check>
              </Form.Check.Label>
              <Form.Check.Label className="w-100">
                <Form.Check
                  type={type}
                  id={`check-api-${type}`}
                  inline
                  className="d-flex justify-content-start align-items-center"
                >
                  <Form.Check.Input type={type} isValid name="group1" />
                  <Form.Control.Feedback type="valid">
                    <h5>
                      Select <strong>Existing Section</strong>
                    </h5>
                    <h6 className="gray-400">
                      Choose the below field and create new section
                    </h6>
                  </Form.Control.Feedback>
                </Form.Check>
              </Form.Check.Label>
              {/* <Form.Check type={type} id={`check-api-${type}`}  inline className='d-flex justify-content-start align-items-center'>
                <Form.Check.Input type={type} isValid name="group1" />
                <Form.Check.Label>{`Custom api ${type}`}</Form.Check.Label>
                <Form.Control.Feedback type="valid">
                  You did it!
                </Form.Control.Feedback>
              </Form.Check> */}
            </div>
          ))}
        </Form>
        <p className="mt-5">
          Nullam posuere purus commodo est egestas dignissim. Vivamus rutrum, mi
          ac rerit auctor, neque purus ultricies justo, in bibendum lorem sapien
          eu nibh.
        </p>

        <Form>
          {['checkbox'].map(type => (
            <div key={`inline-${type}`} className="mb-3">
              <Form.Check
                type={type}
                id={`inline-${type}-1`}
                label={`Course`}
                className="pb-3"
              />
              <Form.Check
                type={type}
                id={`inline-${type}-2`}
                label={`Job`}
                className="pb-3"
              />
              <Form.Check
                type={type}
                id={`inline-${type}-3`}
                label={`Events`}
                className="pb-3"
              />
              <Form.Check
                type={type}
                id={`inline-${type}-4`}
                label={`Content`}
                className="pb-3"
              />
              <Form.Check
                type={type}
                id={`inline-${type}-5`}
                label={`Documents`}
                className="pb-3"
              />
              <Form.Check
                type={type}
                id={`inline-${type}-6`}
                label={`QnA`}
                className="pb-3"
              />
              <Form.Check
                type={type}
                id={`inline-${type}-7`}
                label={`Certification`}
                className="pb-3"
              />
            </div>
          ))}
        </Form>
      </Modal.Body>
      <Modal.Footer />
    </Modal>
  );
};

export default ItemModal;