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",
     "vaul": "^0.9.1",

prisma/migrations/20240905070545_/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - Changed the type of `location` on the `Job` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- AlterTable
+ALTER TABLE "Job" DROP COLUMN "location",
+ADD COLUMN     "location" TEXT NOT NULL;
+
+-- DropEnum
+DROP TYPE "JobLocations";

prisma/schema.prisma

@@ -26,7 +26,7 @@ model Job {
   companyName    String   @map("company_name")
   workMode       WorkMode @map("work_mode")
   currency       Currency @default(INR)
-  location       JobLocations
+  location       String
   hasSalaryRange Boolean  @default(false) @map("has_salary_range")
   minSalary      Int?
   maxSalary      Int?
@@ -52,15 +52,4 @@ enum Role {
   ADMIN
 }
 
-enum JobLocations {
-  BANGLORE
-  DELHI
-  MUMBAI
-  PUNE
-  CHENNAI
-  HYDERABAD
-  KOLKATA
-  AHMEDABAD
-  JAIPUR
-  SURAT
-}
+

prisma/seed.ts

@@ -2,16 +2,13 @@
 import { Currency, Role, WorkMode } from '@prisma/client';
 import bcrypt from 'bcryptjs';
 import prisma from '../src/config/prisma.config';
-import { JobLocations } from '@prisma/client';
 
 const users = [
   { id: '1', name: 'Jack', email: '[email protected]' },
   { id: '2', name: 'Admin', email: '[email protected]', role: Role.ADMIN },
 ];
 
-const locationArr = Object.keys(JobLocations);
-
-let jobs = [
+const jobs = [
   {
     id: '1',
     userId: '1',
@@ -20,6 +17,7 @@ let jobs = [
     companyName: 'Tech Corp',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'New York',
     hasSalaryRange: true,
     minSalary: 60000,
     maxSalary: 80000,
@@ -33,6 +31,7 @@ let jobs = [
     companyName: 'Innovatech',
     workMode: WorkMode.office,
     currency: Currency.INR,
+    location: 'Bangalore',
     hasSalaryRange: false,
     minSalary: null,
     maxSalary: null,
@@ -46,6 +45,7 @@ let jobs = [
     companyName: 'Global Solutions',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'San Francisco',
     hasSalaryRange: true,
     minSalary: 90000,
     maxSalary: 120000,
@@ -60,6 +60,7 @@ let jobs = [
     companyName: 'DevOps Ltd.',
     workMode: WorkMode.remote,
     currency: Currency.INR,
+    location: 'Mumbai',
     hasSalaryRange: true,
     minSalary: 50000,
     maxSalary: 70000,
@@ -74,6 +75,7 @@ let jobs = [
     companyName: 'Productive Minds',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Chicago',
     hasSalaryRange: true,
     minSalary: 110000,
     maxSalary: 150000,
@@ -88,6 +90,7 @@ let jobs = [
     companyName: 'Data Insights',
     workMode: WorkMode.office,
     currency: Currency.INR,
+    location: 'Hyderabad',
     hasSalaryRange: true,
     minSalary: 80000,
     maxSalary: 100000,
@@ -102,6 +105,7 @@ let jobs = [
     companyName: 'Creative Designs',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Seattle',
     hasSalaryRange: true,
     minSalary: 70000,
     maxSalary: 90000,
@@ -115,6 +119,7 @@ let jobs = [
     companyName: 'App Innovators',
     workMode: WorkMode.hybrid,
     currency: Currency.INR,
+    location: 'Delhi',
     hasSalaryRange: false,
     minSalary: null,
     maxSalary: null,
@@ -128,6 +133,7 @@ let jobs = [
     companyName: 'Cloud Works',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Austin',
     hasSalaryRange: true,
     minSalary: 100000,
     maxSalary: 130000,
@@ -141,6 +147,7 @@ let jobs = [
     companyName: 'SecureTech',
     workMode: WorkMode.remote,
     currency: Currency.INR,
+    location: 'Pune',
     hasSalaryRange: true,
     minSalary: 75000,
     maxSalary: 95000,
@@ -154,6 +161,7 @@ let jobs = [
     companyName: 'QA Solutions',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Boston',
     hasSalaryRange: true,
     minSalary: 45000,
     maxSalary: 50000,
@@ -167,6 +175,7 @@ let jobs = [
     companyName: 'Tech Docs',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'San Diego',
     hasSalaryRange: true,
     minSalary: 30000,
     maxSalary: 35000,
@@ -180,6 +189,7 @@ let jobs = [
     companyName: 'Support Corp',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Dallas',
     hasSalaryRange: true,
     minSalary: 20000,
     maxSalary: 25000,
@@ -193,6 +203,7 @@ let jobs = [
     companyName: 'Net Admins',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Houston',
     hasSalaryRange: true,
     minSalary: 35000,
     maxSalary: 40000,
@@ -206,6 +217,7 @@ let jobs = [
     companyName: 'Sys Solutions',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Miami',
     hasSalaryRange: true,
     minSalary: 27000,
     maxSalary: 32000,
@@ -219,6 +231,7 @@ let jobs = [
     companyName: 'Sales Tech',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Chicago',
     hasSalaryRange: true,
     minSalary: 30000,
     maxSalary: 35000,
@@ -232,6 +245,7 @@ let jobs = [
     companyName: 'Market Pro',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Los Angeles',
     hasSalaryRange: true,
     minSalary: 20000,
     maxSalary: 25000,
@@ -245,6 +259,7 @@ let jobs = [
     companyName: 'Content Creators',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'New York',
     hasSalaryRange: true,
     minSalary: 25000,
     maxSalary: 30000,
@@ -258,6 +273,7 @@ let jobs = [
     companyName: 'Design Pros',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'San Francisco',
     hasSalaryRange: true,
     minSalary: 22000,
     maxSalary: 27000,
@@ -271,6 +287,7 @@ let jobs = [
     companyName: 'Business Solutions',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Seattle',
     hasSalaryRange: true,
     minSalary: 38000,
     maxSalary: 43000,
@@ -284,6 +301,7 @@ let jobs = [
     companyName: 'SEO Experts',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Denver',
     hasSalaryRange: true,
     minSalary: 15000,
     maxSalary: 20000,
@@ -297,6 +315,7 @@ let jobs = [
     companyName: 'DataPro',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Atlanta',
     hasSalaryRange: true,
     minSalary: 23000,
     maxSalary: 28000,
@@ -310,6 +329,7 @@ let jobs = [
     companyName: 'OpsCorp',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Phoenix',
     hasSalaryRange: true,
     minSalary: 29000,
     maxSalary: 34000,
@@ -323,6 +343,7 @@ let jobs = [
     companyName: 'Customer Care Inc.',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Orlando',
     hasSalaryRange: true,
     minSalary: 26000,
     maxSalary: 31000,
@@ -336,6 +357,7 @@ let jobs = [
     companyName: 'Product Innovators',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Portland',
     hasSalaryRange: true,
     minSalary: 32000,
     maxSalary: 37000,
@@ -349,6 +371,7 @@ let jobs = [
     companyName: 'Social Media Pros',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Las Vegas',
     hasSalaryRange: true,
     minSalary: 18000,
     maxSalary: 23000,
@@ -362,6 +385,7 @@ let jobs = [
     companyName: 'HR Hub',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Charlotte',
     hasSalaryRange: true,
     minSalary: 24000,
     maxSalary: 29000,
@@ -375,6 +399,7 @@ let jobs = [
     companyName: 'Supply Chain Solutions',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Detroit',
     hasSalaryRange: true,
     minSalary: 30000,
     maxSalary: 35000,
@@ -388,6 +413,7 @@ let jobs = [
     companyName: 'E-commerce Pros',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Philadelphia',
     hasSalaryRange: true,
     minSalary: 27000,
     maxSalary: 32000,
@@ -401,6 +427,7 @@ let jobs = [
     companyName: 'Project Managers Inc.',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Nashville',
     hasSalaryRange: true,
     minSalary: 12000,
     maxSalary: 17000,
@@ -437,13 +464,6 @@ async function seedUsers() {
 }
 
 async function seedJobs() {
-  jobs = jobs.map((j, index) => {
-    return {
-      ...j,
-      location:
-        locationArr[index] !== undefined ? locationArr[index] : locationArr[3],
-    };
-  });
   try {
     await Promise.all(
       jobs.map(async (j) =>
@@ -457,7 +477,6 @@ async function seedJobs() {
             companyName: j.companyName,
             workMode: j.workMode,
             currency: j.currency,
-            //@ts-ignore
             location: j.location,
             hasSalaryRange: j.hasSalaryRange,
             minSalary: j.minSalary,

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 */
+}