JobsList

Careers-page list of open roles, grouped by department with an optional heading.

The JobsList component from @publier/shell renders a careers page as grouped roles. Jobs are bucketed by department in first-seen order; each row links to the job description. If the jobs array is empty, a configurable empty-state message is shown.

Usage

import { JobsList } from '@publier/shell/components';

<JobsList
  heading="Open roles"
  jobs={[
    {
      title: 'Senior Platform Engineer',
      department: 'Engineering',
      location: 'Remote (EU)',
      type: 'Full-time',
      href: '/careers/platform-engineer',
    },
    {
      title: 'Developer Advocate',
      department: 'DevRel',
      location: 'Remote',
      href: '/careers/developer-advocate',
    },
  ]}
/>

Props

`JobsList`

Prop	Type	Default	Description
`jobs`	`JobsListItem[]`	required	Array of job postings.
`heading`	`string`	`undefined`	Optional heading rendered above the list.
`emptyMessage`	`string`	`"We're not hiring right now."`	Message shown when `jobs` is empty.

`JobsListItem`

Prop	Type	Default	Description
`title`	`string`	required	Job title.
`department`	`string`	required	Department name — used as grouping key.
`location`	`string`	required	Job location.
`href`	`string`	required	Link to the job description.
`type`	`string`	`undefined`	Employment type (e.g. `"Full-time"`, `"Contract"`).

Behaviour

Jobs are grouped by department, preserving the order in which departments first appear in the array.
When jobs is empty, only the heading (if any) and the empty-state message render.
Each row is an <a> — no JavaScript needed.
Location and optional employment type are joined with a middle-dot separator (·).