Roles By Department

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its tabs, button, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/careers/careers44.tsx instead.

Usage

The file also exports careers44Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Careers44, careers44Demo } from "@/components/blocks/careers/careers44";

export default function Page() {
  return <Careers44 {...careers44Demo} />;
}

Props

Types

type DepartmentRole = {
  id: string;
  title: string;
  location: string;
  type: string;
};

type Department = {
  value: string;
  label: string;
  roles: DepartmentRole[];
};

Behavior notes

• Tab switching is real: Tabs is used uncontrolled (defaultValue only), so clicking a department tab genuinely swaps which role list is shown, but the block itself stays a Server Component since nothing else reads the active tab value.
• Every role's Apply button is a decorative link (`render={<Link href="#" />}`) with a placeholder href, nothing is submitted anywhere.
• A department with an empty roles array renders a dashed empty-state message instead of an empty list.