{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "careers-job-board", "title": "Careers Job Board", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/careers-job-board/careers-job-board.component.ts", "content": "// Careers page and job openings board with perks overview, live department &\n// location filtering, keyword search, grouped department openings, and a general\n// application CTA. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Briefcase,\n Coins,\n Globe,\n GraduationCap,\n HeartHandshake,\n LucideAngularModule,\n MapPin,\n Search,\n SearchX,\n TrendingUp,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\n\ninterface Perk {\n icon: LucideIconData\n title: string\n description: string\n}\n\nexport interface JobOpening {\n id: string\n title: string\n department: 'Engineering' | 'Design' | 'Product' | 'Marketing'\n location: 'Remote' | 'San Francisco, CA' | 'London, UK'\n type: string\n level: string\n salary: string\n description: string\n}\n\nconst PERKS: Perk[] = [\n {\n icon: Globe,\n title: 'Remote-first',\n description: 'Work from anywhere in the world with flexible hours.',\n },\n {\n icon: GraduationCap,\n title: '$5k learning budget',\n description: 'Annual stipend for courses, books, tools, and conferences.',\n },\n {\n icon: HeartHandshake,\n title: '100% health coverage',\n description: 'Comprehensive medical, dental, and vision for you and dependents.',\n },\n {\n icon: TrendingUp,\n title: 'Equity packages',\n description: 'Meaningful ownership stake with transparent vesting schedules.',\n },\n]\n\nconst DEPARTMENTS = [\n { id: 'all', label: 'All', count: 12 },\n { id: 'Engineering', label: 'Engineering', count: 6 },\n { id: 'Design', label: 'Design', count: 2 },\n { id: 'Product', label: 'Product', count: 2 },\n { id: 'Marketing', label: 'Marketing', count: 2 },\n] as const\n\nconst LOCATIONS = [\n { id: 'all', label: 'All Locations' },\n { id: 'Remote', label: 'Remote' },\n { id: 'San Francisco, CA', label: 'San Francisco, CA' },\n { id: 'London, UK', label: 'London, UK' },\n] as const\n\nconst JOBS: JobOpening[] = [\n {\n id: 'eng-1',\n title: 'Staff Frontend Engineer',\n department: 'Engineering',\n location: 'Remote',\n type: 'Full-time',\n level: 'Staff',\n salary: '$190k - $240k · 0.3% - 0.6%',\n description:\n 'Lead the architecture of our high-performance UI components, compiler toolchains, and multi-framework design systems.',\n },\n {\n id: 'eng-2',\n title: 'Senior Full-Stack Engineer',\n department: 'Engineering',\n location: 'San Francisco, CA',\n type: 'Full-time',\n level: 'Senior',\n salary: '$160k - $210k · 0.25% - 0.5%',\n description:\n 'Build end-to-end features spanning serverless edge runtimes, component registries, and developer tooling.',\n },\n {\n id: 'eng-3',\n title: 'Systems & Performance Engineer',\n department: 'Engineering',\n location: 'Remote',\n type: 'Full-time',\n level: 'Senior',\n salary: '$170k - $220k · 0.25% - 0.5%',\n description:\n 'Optimize bundling pipelines, AST transformers, and static site generation latency across large workspaces.',\n },\n {\n id: 'eng-4',\n title: 'Design Systems Engineer',\n department: 'Engineering',\n location: 'London, UK',\n type: 'Full-time',\n level: 'Mid-Senior',\n salary: '£110k - £140k · 0.2% - 0.4%',\n description:\n 'Bridge design and code by maintaining tokens, accessible headless primitives, and fluid interaction standards.',\n },\n {\n id: 'eng-5',\n title: 'Developer Experience Engineer',\n department: 'Engineering',\n location: 'Remote',\n type: 'Full-time',\n level: 'Mid-Senior',\n salary: '$150k - $190k · 0.2% - 0.4%',\n description:\n 'Craft exceptional CLI workflows, interactive documentation playgrounds, and starter template engines.',\n },\n {\n id: 'eng-6',\n title: 'QA & Automation Engineer',\n department: 'Engineering',\n location: 'London, UK',\n type: 'Full-time',\n level: 'Mid-Senior',\n salary: '£95k - £125k · 0.15% - 0.3%',\n description:\n 'Expand cross-browser visual regression testing suites, accessibility audits, and automated release checks.',\n },\n {\n id: 'des-1',\n title: 'Senior Product Designer',\n department: 'Design',\n location: 'San Francisco, CA',\n type: 'Full-time',\n level: 'Senior',\n salary: '$155k - $195k · 0.25% - 0.45%',\n description:\n 'Define micro-interactions, responsive dashboard workflows, and layout ergonomics across our block catalog.',\n },\n {\n id: 'des-2',\n title: 'Brand & Motion Designer',\n department: 'Design',\n location: 'Remote',\n type: 'Full-time',\n level: 'Mid-Senior',\n salary: '$140k - $180k · 0.2% - 0.35%',\n description:\n 'Create fluid motion principles, brand identity assets, and polished launch visuals for major releases.',\n },\n {\n id: 'prd-1',\n title: 'Staff Technical Product Manager',\n department: 'Product',\n location: 'Remote',\n type: 'Full-time',\n level: 'Staff',\n salary: '$180k - $230k · 0.3% - 0.5%',\n description:\n 'Drive product roadmap for developer workflows, unbundled registry distribution, and monorepo orchestration.',\n },\n {\n id: 'prd-2',\n title: 'Product Operations Lead',\n department: 'Product',\n location: 'San Francisco, CA',\n type: 'Full-time',\n level: 'Senior',\n salary: '$145k - $185k · 0.2% - 0.35%',\n description: 'Manage release triage, community feature requests, and cross-team execution cadences.',\n },\n {\n id: 'mkt-1',\n title: 'Developer Advocate / Technical Writer',\n department: 'Marketing',\n location: 'Remote',\n type: 'Full-time',\n level: 'Mid-Senior',\n salary: '$140k - $180k · 0.2% - 0.4%',\n description:\n 'Author technical deep-dives, create interactive video tutorials, and engage with the open-source community.',\n },\n {\n id: 'mkt-2',\n title: 'Growth Marketing Lead',\n department: 'Marketing',\n location: 'London, UK',\n type: 'Full-time',\n level: 'Senior',\n salary: '£105k - £135k · 0.2% - 0.4%',\n description:\n 'Lead developer-focused growth experiments, SEO architecture, launch campaigns, and analytics instrumentation.',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-careers-job-board, [ui-careers-job-board]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n ],\n template: `\n
\n \n
\n \n \n We're hiring\n \n

{{ titleInput() }}

\n

{{ subtitleInput() }}

\n
\n\n \n
\n @for (perk of perks; track perk.title) {\n
\n
\n \n
\n
\n

{{ perk.title }}

\n

{{ perk.description }}

\n
\n
\n }\n
\n\n \n
\n
\n @for (dept of departments; track dept.id) {\n \n {{ dept.label }}\n \n {{ dept.count }}\n \n \n }\n
\n\n
\n
\n \n \n
\n\n
\n \n \n \n @for (loc of locations; track loc.id) {\n {{ loc.label }}\n }\n \n \n
\n\n @if (isFiltered()) {\n \n Reset filters\n \n }\n
\n
\n\n \n @if (departmentGroups().length > 0) {\n
\n @for (group of departmentGroups(); track group.name) {\n
\n
\n
\n

{{ group.name }}

\n \n {{ group.jobs.length }} {{ group.jobs.length === 1 ? 'opening' : 'openings' }}\n \n
\n
\n\n
\n @for (job of group.jobs; track job.id) {\n \n
\n
\n \n {{ job.title }}\n \n {{ job.level }}\n
\n

{{ job.description }}

\n
\n \n \n {{ job.location }}\n \n \n \n {{ job.type }}\n \n \n \n {{ job.salary }}\n \n
\n
\n
\n \n
\n \n }\n
\n
\n }\n
\n } @else {\n \n \n
\n \n
\n

No matching positions found

\n

\n We could not find any roles matching your current search or filters. Try adjusting your criteria.\n

\n \n \n }\n\n \n \n
\n

Don't see your role?

\n

\n We are always looking for curious, high-craft engineers, designers, and thinkers. Send us an open\n application and tell us what you'd love to build with us.\n

\n
\n \n \n
\n `,\n})\nexport class UiCareersJobBoardComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Briefcase = Briefcase\n protected readonly Coins = Coins\n protected readonly MapPin = MapPin\n protected readonly Search = Search\n protected readonly SearchX = SearchX\n\n protected readonly perks = PERKS\n protected readonly departments = DEPARTMENTS\n protected readonly locations = LOCATIONS\n\n readonly titleInput = signal('Join our team')\n readonly subtitleInput = signal('Help us build the open-source UI infrastructure of tomorrow')\n\n // React props are `title` / `subtitle`; `title` shadows the DOM property so the\n // signal keeps an internal name and the alias exposes the canonical binding.\n @Input({ alias: 'title' }) set titleProp(v: string | undefined) {\n if (v !== undefined) this.titleInput.set(v)\n }\n @Input({ alias: 'subtitle' }) set subtitleProp(v: string | undefined) {\n if (v !== undefined) this.subtitleInput.set(v)\n }\n @Input('class') className?: string\n\n readonly selectedDepartment = signal('all')\n readonly selectedLocation = signal('all')\n readonly searchQuery = signal('')\n\n readonly filteredJobs = computed(() => {\n const q = this.searchQuery().trim().toLowerCase()\n return JOBS.filter((job) => {\n const matchDept = this.selectedDepartment() === 'all' || job.department === this.selectedDepartment()\n const matchLoc = this.selectedLocation() === 'all' || job.location === this.selectedLocation()\n if (!matchDept || !matchLoc) return false\n if (!q) return true\n return (\n job.title.toLowerCase().includes(q) ||\n job.description.toLowerCase().includes(q) ||\n job.department.toLowerCase().includes(q) ||\n job.level.toLowerCase().includes(q) ||\n job.location.toLowerCase().includes(q) ||\n job.type.toLowerCase().includes(q) ||\n job.salary.toLowerCase().includes(q)\n )\n })\n })\n\n readonly departmentGroups = computed(() => {\n const allDepts = ['Engineering', 'Design', 'Product', 'Marketing'] as const\n const sel = this.selectedDepartment()\n const target = sel === 'all' ? allDepts : allDepts.filter((dept) => dept === sel)\n return target\n .map((dept) => ({ name: dept, jobs: this.filteredJobs().filter((job) => job.department === dept) }))\n .filter((group) => group.jobs.length > 0)\n })\n\n readonly isFiltered = computed(\n () => this.selectedDepartment() !== 'all' || this.selectedLocation() !== 'all' || this.searchQuery().trim() !== '',\n )\n\n get rootClass(): string {\n return cn('w-full space-y-12 py-6', this.className)\n }\n\n deptCountClass(id: string): string {\n return cn(\n 'ml-1.5 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums',\n this.selectedDepartment() === id\n ? 'bg-primary-foreground/20 text-primary-foreground'\n : 'bg-muted text-muted-foreground',\n )\n }\n\n resetFilters(): void {\n this.selectedDepartment.set('all')\n this.selectedLocation.set('all')\n this.searchQuery.set('')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/careers-job-board/careers-job-board.component.ts" }, { "path": "packages/registry-angular/blocks/careers-job-board/index.ts", "content": "export { UiCareersJobBoardComponent, type JobOpening } from './careers-job-board.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/careers-job-board/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json" ], "description": "Careers page and job openings board with perks overview, live department & location filtering, keyword search, grouped department openings, and general application CTA.", "categories": [ "marketing" ] }