Added dropdown menues, reafctoring

src/views/demoComponent/DemoComponent10.js

-import React, { lazy, useEffect, useState } from 'react';
+import React, { lazy, useState } from 'react';
 import {
     CBadge,
     CButton,
        setCheckValue(e.target.value);
     }
 
-    useEffect(()=>{
-        console.log(checkValue);
-    }, [checkValue])
-
     const exec = () => {
         const query = [];
 

src/views/demoComponent/DemoComponent11.js

     return (
         <>
             <div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
-                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
+                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '100%', padding: '2px', margin: '5px' }}>
                     <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
                         <h4>PDFEngine</h4>
                     </div>
                         <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove</button>
                     </div>
                 </div>
-                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
-                </div>
             </div>
             <br />
             11

src/views/demoComponent/DemoComponent12.js

 
 
 const DemoComponent12 = () => {
-    const [paperFormat, setPaperFormat] = useState(0);
-    const [inputValue, setInputValue] = useState("");
+    const [checkValue, setCheckValue] = useState(false);
 
-    const handleChange = (event) => {
-        if (!isNaN(event.target.value)) {
-            setPaperFormat(event.target.value);
-            setInputValue(event.target.value);
-        } else {
-            alert('Not a number');
-            setInputValue("");
-        }
+    const handleChange = (e) => {
+        setCheckValue(e.target.value);
     }
+
     const exec = () => {
-    const query = [];
-        
-        // query.push("MarginTop=100 mm");
+        const query = [];
+
+        query.push(`Landscape=${checkValue}`);
         // query.push("PaperFormatType=A3");
-        const queryString = (query) ? `?${query.join('&')}` : ''; 
-        const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent12'+queryString);
-        
+        const queryString = (query) ? `?${query.join('&')}` : '';
+        const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent12' + queryString);
+
         let headers = new Headers();
         headers.append('Content-Type', 'application/pdf');
-        
+
         fetch(url, {
             method: 'GET',
             headers: headers
                 } else {
                     // For other browsers: create a link pointing to the ObjectURL containing the blob.
                     const objUrl = window.URL.createObjectURL(newBlob);
-        
+
                     let link = document.createElement('a');
                     link.href = objUrl;
                     link.download = resObj.filename;
                     link.click();
-        
+
                     // For Firefox it is necessary to delay revoking the ObjectURL.
                     setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
                 }
     }
     return (
         <>
-        <div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
+            <div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
                 <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
                     <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
                         <h4>PDFEngine</h4>
                     </div>
                     <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
-                        <input value={inputValue} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter paper format" type="text" name="name" onChange={handleChange} />
+                        <select value={checkValue} onChange={handleChange} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
+                            <option value="false">Portrait</option>
+                            <option value="true">Landscape</option>
+                        </select>
                         <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
                     </div>
                 </div>
                 <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
                 </div>
             </div>
-        <br/>
-        <br/>
-        <WidgetsDropdown />
+            <br />
+            <br />
+            <WidgetsDropdown />
             <CCard isolate="true">
                 <CCardBody>
                     <CRow>
                                 </CCol>
                             </CRow>
                             <div>
-                                <br />                              
+                                <br />
                                 <table className="table table-hover table-outline mb-0 d-sm-table">
                                     <thead className="thead-light">
                                         <tr>

src/views/demoComponent/DemoComponent5.js

     return (
         <>
             <div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
-                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
+                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '100%', padding: '2px', margin: '5px' }}>
                     <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
                         <h4>PDFEngine</h4>
                     </div>
                         <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Remove</button>
                     </div>
                 </div>
-                <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
-                </div>
             </div>
 
             <br />

src/views/demoComponent/DemoComponent9.js

-import React, { lazy, useState } from 'react';
+import React, { lazy, useEffect, useState } from 'react';
 import {
     CBadge,
     CButton,
 
 
 const DemoComponent9 = () => {
-    const [paperFormat, setPaperFormat] = useState(0);
-    const [inputPaperFormat, setInputPaperFormat] = useState("");
+    const [paperFormat, setPaperFormat] = useState('A4');
+    const [margins, setMargins] = useState("");
 
     const handleChange = (event) => {
-            setPaperFormat(event.target.value);
-            setInputPaperFormat(event.target.value);
+        setPaperFormat(event.target.value);
     }
-    const [margins, setMargins] = useState("");
-    const [inputMargins, setInputMargins] = useState("");
-
+    
     const handleChangeMargin = (event) => {
-            setMargins(event.target.value);
-            setInputMargins(event.target.value);
+        setMargins(event.target.value);
     }
+    
     const exec = () => {
         const query = [];
         const arrayMargins = margins.split(',');
         query.push(`MarginBottom=${arrayMargins[2]}`);
         query.push(`MarginLeft=${arrayMargins[3]}`);
         query.push(`PaperFormatType=${paperFormat}`);
-        const queryString = (query) ? `?${query.join('&')}` : ''; 
-        const url = ('https://localhost:7285/api/PDFGenerator/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent9'+queryString);
-        
+        const queryString = (query) ? `?${query.join('&')}` : '';
+        const url = ('https://localhost:7285/api/PDFGenerator/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent9' + queryString);
+
         let headers = new Headers();
         headers.append('Content-Type', 'application/pdf');
-        
+
         fetch(url, {
             method: 'GET',
             headers: headers
                 } else {
                     // For other browsers: create a link pointing to the ObjectURL containing the blob.
                     const objUrl = window.URL.createObjectURL(newBlob);
-        
+
                     let link = document.createElement('a');
                     link.href = objUrl;
                     link.download = resObj.filename;
                     link.click();
-        
+
                     // For Firefox it is necessary to delay revoking the ObjectURL.
                     setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
                 }
             .catch((error) => {
                 console.log('DOWNLOAD ERROR', error);
             });
-        }
+    }
     return (
         <>
-        <div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
+            <div code="br-hide" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
                 <div style={{ backgroundColor: 'white', minHeight: '100%', width: '100%', padding: '2px', margin: '5px' }}>
                     <div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
                         <h4>PDFEngine</h4>
                     </div>
                     <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
-                        <input value={inputPaperFormat} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter paper format" type="text" name="name" onChange={handleChange} />
-                        <input value={inputMargins} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter margins top,right,bottom,left" type="text" name="name" onChange={handleChangeMargin} />
-                        <br/>
+                        <select value={paperFormat} onChange={handleChange} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
+                            <option value="A4">A4</option>
+                            <option value="A3">A3</option>
+                            <option value="Letter">Letter</option>
+                        </select>
+                        <input value={margins} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', marginLeft: '5px', width: '210px' }} placeholder=" Margins: top, right, bottom, left" type="text" name="name" onChange={handleChangeMargin} />
+                        <br />
                         <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
                     </div>
                 </div>
-                {/* <div style={{ backgroundColor: 'white', minHeight: '100%', width: '30%', padding: '5px' }}>
-                </div> */}
             </div>
-        <br/>
-        <br/>
-        <WidgetsDropdown />
+            <br />
+            <br />
+            <WidgetsDropdown />
             <CCard>
                 <CCardBody>
                     <CRow>
                                 </CCol>
                             </CRow>
                             <div>
-                                <br />                              
+                                <br />
                                 <table className="table table-hover table-outline mb-0 d-sm-table" >
                                     <thead className="thead-light">
                                         <tr>