💄 Add Jobs section

src/components/jobPosting/JobPosting.tsx

@@ -0,0 +1,41 @@
+import LinkButton from "src/components/linkButton/LinkButton";
+import Text from "src/components/text/Text";
+import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
+import { IJobPosting } from "studio/lib/interfaces/jobPosting";
+import { LinkType } from "studio/lib/interfaces/navigation";
+
+import styles from "./jobPosting.module.css";
+
+interface JobPostingProps {
+  jobPosting: IJobPosting;
+}
+
+export default async function JobPosting({ jobPosting }: JobPostingProps) {
+  const jobPostingLocations = jobPosting.locations
+    .map((location: CompanyLocation) => location.companyLocationName)
+    .join(", ");
+
+  return (
+    <div className={styles.jobPosting}>
+      <div className={styles.details}>
+        <div className={styles.role}>
+          <Text type={"h5"}>{jobPosting.role}</Text>
+        </div>
+        <div className={styles.locations}>
+          <Text type={"bodyNormal"}>{jobPostingLocations}</Text>
+        </div>
+      </div>
+      <LinkButton
+        link={{
+          _key: "recruitee",
+          _type: "link",
+          linkType: LinkType.External,
+          linkTitle: " ",
+          newTab: true,
+          url: jobPosting.recruiteeAdUrl,
+        }}
+        type="secondary"
+      />
+    </div>
+  );
+}

src/components/jobPosting/jobPosting.module.css

@@ -0,0 +1,31 @@
+.jobPosting {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 24px;
+  height: 64px;
+  padding: 8px 24px;
+  gap: 5rem;
+  background-color: var(--text-primary-light);
+  color: var(--text-primary);
+}
+
+.details {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.role {
+  width: 250px;
+}
+
+.locations {
+  padding: 6px 12px;
+  border: solid;
+  border-color: var(--text-primary);
+  border-width: thin;
+  border-radius: 24px;
+}

src/components/sections/jobs/Jobs.tsx

@@ -0,0 +1,36 @@
+import JobPosting from "src/components/jobPosting/JobPosting";
+import Text from "src/components/text/Text";
+import { IJobPosting } from "studio/lib/interfaces/jobPosting";
+import { JobsSection } from "studio/lib/interfaces/pages";
+import { JOB_POSTINGS_QUERY } from "studio/lib/queries/admin";
+import { loadStudioQuery } from "studio/lib/store";
+
+import styles from "./jobs.module.css";
+
+export interface JobsProps {
+  language: string;
+  section: JobsSection;
+}
+
+export default async function Jobs({ language, section }: JobsProps) {
+  const { data: jobPostings } = await loadStudioQuery<IJobPosting[] | null>(
+    JOB_POSTINGS_QUERY,
+    {
+      language,
+    },
+  );
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.titleSection}>
+        <Text type={"h2"}>{section.basicTitle}</Text>
+        <Text type={"bodyNormal"}>{section.subtitle}</Text>
+      </div>
+      <div className={styles.jobPostings}>
+        {jobPostings?.jobPostingsArray?.map((jobPosting: IJobPosting) => (
+          <JobPosting jobPosting={jobPosting} key={jobPosting._key} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/sections/jobs/jobs.module.css

@@ -0,0 +1,24 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 32px 6px 6px 6px;
+  max-width: 50%;
+  margin: 5rem auto;
+  border-radius: 6px;
+  gap: 0.5rem;
+  background-color: var(--Violet-700);
+  color: var(--text-primary-light);
+}
+
+.titleSection {
+  padding: 0px 24px;
+}
+
+.jobPostings {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-wrap: wrap;
+  gap: 0.5rem;
+}

src/utils/renderSection.tsx

@@ -14,6 +14,7 @@ import { Hero } from "src/components/sections/hero/Hero";
 import HeroPreview from "src/components/sections/hero/HeroPreview";
 import ImageSectionComponent from "src/components/sections/imageSection/ImageSectionComponent";
 import ImageSectionComponentPreview from "src/components/sections/imageSection/ImageSectionComponentPreview";
+import Jobs from "src/components/sections/jobs/Jobs";
 import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad";
 import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview";
 import { Testimonials } from "src/components/sections/testimonials/Testimonials";
@@ -221,6 +222,8 @@ const SectionRenderer = ({
       return renderGridSection(section, sectionIndex, isDraftMode, initialData);
     case "employees":
       return <Employees language={language} section={section} />;
+    case "jobs":
+      return <Jobs language={language} section={section} />;
     default:
       return null;
   }

studio/lib/queries/admin.ts

@@ -1,6 +1,7 @@
 import { groq } from "next-sanity";
 
 import { companyInfoID } from "studio/schemas/documents/admin/companyInfo";
+
 import { translatedFieldFragment } from "./utils/i18n";
 
 //Parent Company

studio/schemas/documents/pageBuilder.ts

@@ -9,9 +9,9 @@ import { employees } from "studio/schemas/objects/sections/employees";
 import grid from "studio/schemas/objects/sections/grid";
 import hero from "studio/schemas/objects/sections/hero";
 import imageSection from "studio/schemas/objects/sections/image";
+import { jobs } from "studio/schemas/objects/sections/jobs";
 import logoSalad from "studio/schemas/objects/sections/logoSalad";
 import testimonals from "studio/schemas/objects/sections/testimonials";
-import { jobs } from "studio/schemas/objects/sections/jobs";
 import seo from "studio/schemas/objects/seo";
 import { titleSlug } from "studio/schemas/schemaTypes/slug";
 import { firstTranslation } from "studio/utils/i18n";