chore: added input in creation collection form

packages/grafnode-components/src/components/Sidebar/CreateCollection/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Modal from '../../Modal';
+
+const CreateCollection = ({handleConfirm, handleCancel, actions, dispatch}) => {
+  return (
+    <Modal
+      size="sm"
+      title='Create Collection'
+      handleConfirm={handleConfirm}
+      handleCancel={handleCancel}
+    >
+      <form className="grafnode-form">
+        <label htmlFor="name" className="block font-semibold">Name</label>
+        <input
+          id="collection-name" type="text" name="collection-name"
+          className="block textbox mt-2 w-full"
+          required
+        />
+      </form>
+    </Modal>
+  );
+};
+
+export default CreateCollection;

packages/grafnode-components/src/components/Sidebar/index.js

@@ -1,6 +1,6 @@
 import React, { useState, forwardRef, useRef } from 'react';
 import Collections from './Collections';
-import Modal from '../Modal';
+import CreateCollection from './CreateCollection';
 import Navbar from '../Navbar';
 import Dropdown from '../Dropdown';
 import { IconBox, IconSearch, IconDots } from '@tabler/icons';
@@ -29,16 +29,14 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
 
   return (
     <StyledWrapper>
-      {modalOpen && (
-        <Modal
-          size="md"
-          title='Create Collection'
+      {modalOpen ? (
+        <CreateCollection
           handleCancel={handleCancel}
           handleConfirm={handleConfirm}
-        >
-          Hello
-        </Modal>
-      )}
+          actions={actions}
+          dispatch={dispatch}
+        />
+      ) : null}
 
       <Navbar />