From fd9fb3810c0daa47245b8e5a7eeefcf5edd40955 Mon Sep 17 00:00:00 2001 From: Petter Hohle Date: Thu, 28 Nov 2024 14:32:02 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20Jobs=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/jobPosting/JobPosting.tsx | 41 +++++++++++++++++++ .../jobPosting/jobPosting.module.css | 31 ++++++++++++++ src/components/sections/jobs/Jobs.tsx | 36 ++++++++++++++++ src/components/sections/jobs/jobs.module.css | 24 +++++++++++ src/utils/renderSection.tsx | 3 ++ studio/lib/queries/admin.ts | 1 + studio/schemas/documents/pageBuilder.ts | 2 +- 7 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 src/components/jobPosting/JobPosting.tsx create mode 100644 src/components/jobPosting/jobPosting.module.css create mode 100644 src/components/sections/jobs/Jobs.tsx create mode 100644 src/components/sections/jobs/jobs.module.css diff --git a/src/components/jobPosting/JobPosting.tsx b/src/components/jobPosting/JobPosting.tsx new file mode 100644 index 000000000..7cf3b0752 --- /dev/null +++ b/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 ( +
+
+
+ {jobPosting.role} +
+
+ {jobPostingLocations} +
+
+ +
+ ); +} diff --git a/src/components/jobPosting/jobPosting.module.css b/src/components/jobPosting/jobPosting.module.css new file mode 100644 index 000000000..3ad5d0f88 --- /dev/null +++ b/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; +} diff --git a/src/components/sections/jobs/Jobs.tsx b/src/components/sections/jobs/Jobs.tsx new file mode 100644 index 000000000..b3952cef5 --- /dev/null +++ b/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( + JOB_POSTINGS_QUERY, + { + language, + }, + ); + + return ( +
+
+ {section.basicTitle} + {section.subtitle} +
+
+ {jobPostings?.jobPostingsArray?.map((jobPosting: IJobPosting) => ( + + ))} +
+
+ ); +} diff --git a/src/components/sections/jobs/jobs.module.css b/src/components/sections/jobs/jobs.module.css new file mode 100644 index 000000000..4fa9d5b2b --- /dev/null +++ b/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; +} diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index 57a98b2d2..be05d469d 100644 --- a/src/utils/renderSection.tsx +++ b/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 ; + case "jobs": + return ; default: return null; } diff --git a/studio/lib/queries/admin.ts b/studio/lib/queries/admin.ts index bcc519328..abe813049 100644 --- a/studio/lib/queries/admin.ts +++ b/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 diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index 82e6447cb..7bb5e686b 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/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";