tabler/preview/pages/job-listing.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import Card from '@ui/Card.astro'
import Avatar from '@ui/Avatar.astro'
import Check from '@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) => (
              <Card>
                <div class="row g-0">
                  <div class="col-auto">
                    <div class="card-body">
                      <Avatar src={`static/jobs/${job.image}`} size="md" />
                    </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>
              </Card>
            ))
          }
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>