tabler/preview/pages/job-listing.astro

---
// Port of preview/pages/job-listing.html (layout: default)
// NOTE: page-header-actions "add-job" requires PageHeader.astro to dispatch it
// to HeaderActionsAddJob — see the migration report (PageHeader.astro is a
// shared component and was not modified here).
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Icon from '@shared/components/Icon.astro';
import Check from '@shared/components/ui/form/Check.astro';
import jobsData from '@data/jobs.json';

interface Job {
	company: string;
	location: string;
	title: string;
	type: string;
	image: string;
	salary?: string;
	tags: string[];
}

const jobs = jobsData as Job[];

const types = ['Programming', 'Design', 'Management / Finance', 'Customer Support', 'Sales / Marketing'];
const salaries = ['$20K - $50K', '$50K - $100K', '> $100K', 'Drawing / Painting'];
---

<DefaultLayout title="Search for Jobs" pageHeader="Search for Jobs" actions="add-job" pageMenu="extra.job-listing">
	<div class="row g-4">
		<div class="col-md-3">
			<form action="./" method="get" autocomplete="off" novalidate class="sticky-top">
				<div class="form-label">Job Types</div>
				<div class="mb-4">
					{
						types.map((type, i) => (
							<label class="form-check">
								<input type="checkbox" class="form-check-input" name="form-type[]" value={i + 1} checked={i + 1 <= 2} />
								<span class="form-check-label">{type}</span>
							</label>
						))
					}
				</div>

				<div class="form-label">Remote</div>
				<div class="mb-4">
					<Check switch={true} titleOn="On" titleOff="Off" />
				</div>

				<div class="form-label">Salary Range</div>
				<div class="mb-4">
					{
						salaries.map((salary, i) => (
							<label class="form-check">
								<input type="radio" class="form-check-input" name="form-salary" value={i + 1} checked={i + 1 <= 2} />
								<span class="form-check-label">{salary}</span>
							</label>
						))
					}
				</div>

				<div class="form-label">Immigration</div>
				<div class="mb-4">
					<Check switch={true} titleOn="On" titleOff="Off" />

					<div class="small text-secondary">Only show companies that can sponsor a visa</div>
				</div>

				<label class="form-label" for="job-location">Location</label>
				<div class="mb-4">
					<select class="form-select" id="job-location" name="location">
						<option>Anywhere</option>
						<option>London</option>
						<option>San Francisco</option>
						<option>New York</option>
						<option>Berlin</option>
					</select>
				</div>

				<div class="mt-5">
					<button class="btn btn-primary w-100">
						Confirm changes
					</button>
					<a href="#" class="btn btn-link w-100">
						Reset to defaults
					</a>
				</div>
			</form>
		</div>
		<div class="col-md-9">
			<div class="row row-cards">
				<div class="space-y">
					{
						jobs.map((job) => (
							<div class="card">
								<div class="row g-0">
									<div class="col-auto">
										<div class="card-body">
											<div class="avatar avatar-md" style={`background-image: url(./static/jobs/${job.image})`} />
										</div>
									</div>
									<div class="col">
										<div class="card-body ps-0">
											<div class="row">
												<div class="col">
													<h3 class="mb-0">
														<a href="#">{job.title}</a>
													</h3>
												</div>
												{job.salary && <div class="col-auto fs-3 text-green">{job.salary}</div>}
											</div>
											<div class="row">
												<div class="col-md">
													<div class="mt-3 list-inline list-inline-dots mb-0 text-secondary d-sm-block d-none">
														<div class="list-inline-item">
															<Icon name="building-community" class="icon-inline" /> {job.company}
														</div>
														<div class="list-inline-item">
															<Icon name="license" class="icon-inline" /> {job.type}
														</div>
														<div class="list-inline-item">
															<Icon name="map-pin" class="icon-inline" /> {job.location}
														</div>
													</div>
													<div class="mt-3 list mb-0 text-secondary d-block d-sm-none">
														<div class="list-item">
															<Icon name="building-community" class="icon-inline" /> {job.company}
														</div>
														<div class="list-item">
															<Icon name="license" class="icon-inline" /> {job.type}
														</div>
														<div class="list-item">
															<Icon name="map-pin" class="icon-inline" /> {job.location}
														</div>
													</div>
												</div>
												<div class="col-md-auto">
													<div class="mt-3 badges">
														{job.tags.map((tag) => (
															<a href="#" class="badge badge-outline text-secondary fw-normal badge-pill">{tag}</a>
														))}
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						))
					}
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>