Skills

src/app/(routes)/admin/jobs/[jobId]/page.tsx

@@ -297,16 +297,15 @@ const JobDetailPage = ({ params }: { params: { jobId: string } }) => {
             <div>
               <div className="font-semibold text-lg my-4">Skills</div>
               <div className="flex flex-wrap gap-4">
-                {editMode ? (
-                  <input
-                    type="text"
-                    name="skills"
-                    value={formData.skills}
-                    onChange={handleChange}
-                  />
-                ) : (
-                  job.skills
-                )}
+                <div className="flex flex-wrap !text-md">
+                  {job.skills.map((skill, index) => (
+                    <div key={index} className="mx-2 my-2">
+                      <div className="border-2 border-gray-300 p-2 px-4 rounded-full bg-gray-200 text-gray-600">
+                        {skill}
+                      </div>
+                    </div>
+                  ))}
+                </div>
               </div>
               <div className="flex md:flex-row flex-col flex-wrap bg-gray-200 rounded-lg justify-between py-4 px-6 my-3">
                 <div>

src/components/jobs/JobCard.tsx

@@ -88,6 +88,23 @@ const JobCard = ({ jobItem, type}: Props) => {
               className="job-description"
               dangerouslySetInnerHTML={{ __html: cleanHTML }}
             />
+            <div className="my-4">
+              <Separator />
+            </div>
+            <div className="font-semibold text-md"> Skills </div>
+            <div className="flex flex-wrap !text-md">
+              {jobItem.skills.map((skill, index) => (
+                <div key={index} className="mx-2 my-2">
+                  <div className="border-2 border-gray-300 p-2 px-4 rounded-full bg-gray-200 text-gray-600">
+                    {skill}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="my-4">
+              <Separator />
+            </div>
+
             <div className="flex justify-between my-3">
               <Button>
                 <Link href={`/student/job/salary/${jobItem.id}`}>Salaries</Link>

src/helpers/recruiter/types.ts

@@ -119,7 +119,7 @@ export interface JobDetailFC {
   };
   description: string;
   attachment: string;
-  skills: string;
+  skills: string[];
   offerLetterReleaseDate: string;
   joiningDate: string;
   location: string;

src/helpers/student/types.ts

@@ -158,6 +158,7 @@ export interface Jobs {
   role: string;
   duration: string;
   attachment: string;
+  skills: string[];
   description: string;
   active: boolean;
   currentStatus: string;