JSX for a video editor controls

video-editor-controls.js

import React, { useState } from "react";
import { Helmet } from "react-helmet";

const App = () => {
  // State variables and component functions go in here.
  // Upload widget configuration goes in here
  return (
    <div>
      <main className="App">
        <section className="left-side">
          <Helmet>
            <meta charSet="utf-8" />
            <script
              src="https://widget.Cloudinary.com/v2.0/global/all.js"
              type="text/javascript"></script>
          </Helmet>
          <form>
            {/*Media upload buttons go in here*/}
            <h1>Media Upload</h1>
            <button
              type="button"
              className="btn widget-btn"
              onClick={openWidget}
            >
              Upload Video
            </button>
            &nbsp; &nbsp;
            <button
              type="button"
              className="btn widget-btn"
              onClick={openWidget}
            >
              Upload Audio
            </button>

            <h1>Video Transformation</h1>
            <h3>Progress Bar Color:</h3>
            <label className="label">Change Color</label>
            <input
              type="radio"
              value="blue"
              name="color"
            />
            <label>Blue</label>
            <input
              type="radio"
              value="red"
              name="color"
            />
            <label>Red</label>
            <h3>Crop Video</h3>
            <label className="label">Select Type</label>
            <input
              type="radio"
              value="scale"
              name="crop"
            />
            <label>Scale</label>
            <input
              type="radio"
              value="crop"
              name="crop"
            />
            <label>Crop</label>
            <h3>Text</h3>
            <label className="label">Add Text</label>
            <input
              id="text"
              type="text"
            />
            <h3>Blur Effect</h3>
            <label className="label">Adjust Blur Effect</label>
            <input
              type="number"
            />
          </form>
        </section>
        <section className="right-side">
          {/*Transformed video component goes in here*/}
        </section>
      </main>
    </div>
  );
};
export default App;