Update Job creation UI

package.json

@@ -49,6 +49,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.2.1",
+    "react-quill": "^2.0.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8",

src/app/create/page.tsx

@@ -3,7 +3,13 @@ import React from 'react';
 
 const page = () => {
   return (
-    <div className="container">
+    <div className="mt-10">
+      <div>
+        <h1 className="text-center text-4xl font-semibold">Post a job</h1>
+        <p className="text-center mt-6 text-lg text-gray-300">
+          100xJobs is trusted by leading companies
+        </p>
+      </div>
       <PostJobForm />
     </div>
   );

src/app/globals.css

@@ -297,3 +297,51 @@
     transform: rotate(360deg);
   }
 }
+
+/* Custom styles for Quill editor */
+.ql-toolbar.ql-snow {
+  border: none !important;
+  background-color: #1f2937 !important;
+  border-bottom: 1px solid #374151 !important;
+}
+
+.ql-container.ql-snow {
+  border: none !important;
+  max-height: 56rem; /* Set a fixed height */
+  overflow-y: hidden; /* Hide vertical overflow */
+  overflow-x: auto; /* Allow horizontal scrolling */
+}
+
+.ql-editor {
+  min-height: 10px;
+  overflow-y: hidden; /* Prevent height increase */
+  white-space: nowrap; /* Ensure long lines don't wrap */
+}
+
+.ql-editor.ql-blank::before {
+  color: #6b7280 !important;
+}
+
+.ql-snow .ql-stroke {
+  stroke: #9ca3af !important;
+}
+
+.ql-snow .ql-fill {
+  fill: #9ca3af !important;
+}
+
+.ql-snow .ql-picker {
+  color: #9ca3af !important;
+}
+
+/* Ensure the editor takes up full width of its container */
+.job-description-editor {
+  width: 100% !important;
+}
+
+/* Ensure long content does not wrap within the editor */
+.job-description-editor .ql-editor {
+  white-space: nowrap !important;
+  overflow-x: hidden !important; /* Allow horizontal scrolling */
+  overflow-y: hidden !important; /* Hide vertical overflow */
+}

src/components/JobDescriptionEditor.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
+import 'react-quill/dist/quill.snow.css';
+
+const JobDescriptionEditor = () => {
+  const modules = {
+    toolbar: [
+      ['bold', 'italic', 'underline'],
+      [{ header: '1' }, { header: '2' }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      ['link'],
+    ],
+  };
+
+  const formats = [
+    'bold',
+    'italic',
+    'underline',
+    'header',
+    'list',
+    'bullet',
+    'link',
+  ];
+
+  return (
+    <div className="bg-gray-900 p-4  rounded mx-auto w-[37rem]">
+      <h2 className="text-sm font-semibold  text-white">Job description</h2>
+      <div className="bg-gray-800 rounded-xl mt-2 overflow-hidden">
+        <ReactQuill
+          theme="snow"
+          modules={modules}
+          formats={formats}
+          placeholder="Tell us about your job"
+          className="text-white bg-gray-800 overflow-hidden job-description-editor"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default JobDescriptionEditor;