<template>

    <div class="container mx-auto p-4">

      <h1 class="text-2xl font-bold mb-4">Job Listings</h1>
      <div>
        <JobListing v-for="job in jobs" :key="job.id"
          :logo="job.logo"
          :company="job.company"
          :position="job.position"
          :skills="job.skills"
          :postedAt="job.postedAt"
          :contract="job.contract"
          :location="job.location"
        />
      </div>
    </div>
  </template>
 
  <script>
  import JobListing from '../components/JobListing.vue';
 
  export default {
    components: {
      JobListing
    },
    data() {
      return {
        jobs: [
          // Define your job listings here as objects with the required
properties
          {
            id: 1,
            logo: require('@/assets/images/company-logo-1.png'),
            company: 'Company 1',
            position: 'Frontend Developer',
            skills: ['HTML', 'CSS', 'JavaScript'],
            postedAt: '1d ago',
            contract: 'Full Time',
            location: 'Remote'
          },
          {
            id: 2,
            logo: require('@/assets/images/company-logo-2.png'),
            company: 'Company 2',
            position: 'UI Designer',
            skills: ['UI Design', 'Adobe XD', 'Photoshop'],
            postedAt: '3d ago',
            contract: 'Part Time',
            location: 'New York'
          },
          // Add more job listings as needed
        ]
      };
    }
  };
  </script>
 
  <style>
  /* CSS for the component */
  </style>