Implement JobsPerDepartment component

packages/docusaurus-playground/src/pages/index.mdx

@@ -18,6 +18,7 @@ import {
   SectionHeader,
   TimelineItem,
   ShowcaseCard,
+  JobsPerDepartment,
 } from '../components/mdx'
 
 <Hero size="large">
@@ -352,3 +353,4 @@ import {
     Build on Waku
   </CallToActionButton>
 </Box>
+<JobsPerDepartment jobBoard="codex" useDummyData />

packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/JobsPerDepartment.scss

@@ -0,0 +1,52 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-jpd__header {
+  margin-bottom: 40px;
+  margin-top: 16px;
+}
+
+.mdx-jpd__single-job-department-container {
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+  padding-top: 8px;
+}
+
+.mdx-jpd__department-title {
+  font-size: 12px !important;
+  line-height: 16px !important;
+}
+
+.mdx-jpd__job-title-container {
+  display: flex;
+  align-items: center;
+
+  padding-bottom: 8px;
+}
+
+.mdx-jpd__external-link-icon {
+  margin-left: 8px;
+}
+
+.mdx-jpd__job-list {
+  list-style-type: none;
+  padding: 8px 0 24px 0;
+  margin: 0;
+}
+
+.mdx-jpd__job-list-item {
+  padding: 14px 0;
+}
+
+.mdx-jpd__job-link {
+  display: block;
+  width: fit-content;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+
+    .mdx-jpd__job-title {
+      text-decoration: underline;
+    }
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/JobsPerDepartment.tsx

@@ -0,0 +1,79 @@
+import { Typography } from '@acid-info/lsd-react'
+import { SingleDepartmentJobs } from './SingleDepartmentJobs'
+import useFetchJobs, { JobDepartmentArray } from './useFetchJobs'
+import React from 'react'
+import { jobsPerDepartmentDummyData } from './jobsPerDepartmentDummyData'
+
+type JobsPerDepartmentHeaderProps = {
+  message?: string
+}
+
+const JobsPerDepartmentHeader: React.FC<JobsPerDepartmentHeaderProps> = ({
+  message,
+}) => {
+  return (
+    <>
+      <Typography variant="h1" className="mdx-jpd__header">
+        Current job openings
+      </Typography>
+
+      {!!message && <Typography variant="body1">{message}</Typography>}
+    </>
+  )
+}
+
+const hasJobs = (jobsPerDepartment: JobDepartmentArray): boolean => {
+  if (!jobsPerDepartment) return false
+
+  // Check if there's any department that has at least one job
+  let jobFound = jobsPerDepartment.some((department) => {
+    return department.jobs && department.jobs.length > 0
+  })
+
+  return jobFound
+}
+
+type JobsPerDepartmentProps = React.HTMLAttributes<HTMLDivElement> & {
+  jobBoard: string
+  titleFilter?: string
+  fetchAll?: boolean
+  useDummyData?: boolean
+}
+
+export const JobsPerDepartment: React.FC<JobsPerDepartmentProps> = ({
+  jobBoard,
+  titleFilter = '',
+  fetchAll = false,
+  useDummyData = false,
+  ...props
+}) => {
+  const { data, error, isLoading } = useFetchJobs(
+    jobBoard,
+    titleFilter,
+    useDummyData ? jobsPerDepartmentDummyData : null,
+  )
+
+  if (isLoading) {
+    // Skipping loading state for now, as per the designer's request.
+    return <JobsPerDepartmentHeader />
+  }
+
+  if (error) {
+    return <JobsPerDepartmentHeader message="Error fetching data" />
+  }
+
+  if (!data || !hasJobs(data)) {
+    return <JobsPerDepartmentHeader message="No job openings to show" />
+  }
+
+  return (
+    <div {...props}>
+      <JobsPerDepartmentHeader />
+      {data.map((department) => {
+        return (
+          <SingleDepartmentJobs key={department.name} department={department} />
+        )
+      })}
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/SingleDepartmentJobs.tsx

@@ -0,0 +1,50 @@
+import { Typography } from '@acid-info/lsd-react'
+import { JobDepartmentData } from './useFetchJobs'
+import React from 'react'
+import { IconExternalLink } from '@logos-theme/components/Icon'
+import './JobsPerDepartment.scss'
+import Link from '@docusaurus/Link'
+
+type SingleDepartmentJobsProps = {
+  department: JobDepartmentData
+}
+
+export const SingleDepartmentJobs: React.FC<SingleDepartmentJobsProps> = ({
+  department,
+}) => {
+  if (!department.jobs || department.jobs.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="mdx-jpd__single-job-department-container">
+      <Typography variant="subtitle2" className="mdx-jpd__department-title">
+        {department.name}
+      </Typography>
+      <ul className="mdx-jpd__job-list">
+        {department.jobs.map((job, index) => (
+          <li key={index} className="mdx-jpd__job-list-item">
+            <Link
+              href={job.absolute_url}
+              target="_blank"
+              className="mdx-jpd__job-link"
+            >
+              <div className="mdx-jpd__job-title-container">
+                <Typography variant="h6" className="mdx-jpd__job-title">
+                  {job.title}
+                </Typography>
+                <IconExternalLink className="mdx-jpd__external-link-icon" />
+              </div>
+
+              {!!job.location?.name && (
+                <Typography variant="subtitle2" component="div">
+                  {job.location.name}
+                </Typography>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/JobsPerDepartment/index.ts

@@ -0,0 +1 @@
+export * from './JobsPerDepartment'