computed function and truncated strings

package.json

@@ -9,10 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@primevue/themes": "^4.2.1",
+    "primevue": "^4.2.1",
     "vue": "^3.5.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "vite": "^5.4.10"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -1,65 +1,15 @@
 <script setup>
-import { onMounted, ref } from "vue";
-
-const name = ref("John Doe");
-const status = ref("pending");
-const tasks = ref(["Task 1", "Task 2", "Task 3"]);
-const newTask = ref("");
-
-const toggleStatus = () => {
-  if (status.value === "active") {
-    status.value = "inactive";
-  } else if (status.value === "inactive") {
-    status.value = "pending";
-  } else {
-    status.value = "active";
-  }
-};
-
-const addTask = () => {
-  if (newTask.value.trim() !== "") {
-    tasks.value.push(newTask.value);
-    newTask.value = "";
-  }
-};
-
-const deleteTask = (index) => {
-  tasks.value.splice(index, 1);
-};
-
-onMounted(async () => {
-  try {
-    const response = await fetch("https://jsonplaceholder.typicode.com/todos");
-    const data = await response.json();
-    tasks.value = data.map((task) => task.title);
-  } catch (error) {
-    console.log(error);
-  }
-});
+import Navbar from "@/components/Navbar.vue";
+import Hero from "@/components/Hero.vue";
+import HomeCards from "@/components/HomeCards.vue";
+import JobListings from "./components/JobListings.vue";
 </script>
 <template>
-  <h1>Vue Jobs</h1>
-  <p>{{ name }}</p>
-
-  <p v-if="status === 'active'">User is Active</p>
-  <p v-else-if="status === 'pending'">User is pending</p>
-  <p v-else>User is inactive</p>
-
-  <form @submit.prevent="addTask">
-    <label for="newTask">Add Task</label>
-    <input id="newTask" v-model="newTask" type="text" name="newTask" />
-    <button type="submit">Submit</button>
-  </form>
-
-  <h3>Tasks:</h3>
-  <ul>
-    <li v-for="(tas, index) in tasks" :key="tas">
-      <span>{{ tas }}</span>
-      <button @click="deleteTask(index)">X</button>
-    </li>
-  </ul>
-
-  <!-- Any of the below two works -->
-  <!-- <button v-on:click="toggleStatus">Change Status</button> -->
-  <button @click="toggleStatus">Change Status</button>
+  <Navbar />
+  <Hero
+    title="Become a Vue Dev!"
+    subtitle="Find the Vue job that fits your skills and needs"
+  />
+  <HomeCards />
+  <JobListings :limit="5" :showButton="true" />
 </template>

src/assets/main.css

@@ -1,29 +1,3 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-
-  #app {
-    display: grid;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/Card.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  bg: {
+    type: String,
+    default: "bg-gray-100",
+  },
+});
+</script>
+<template>
+  <div :class="`${bg} p-6 rounded-lg shadow-md`">
+    <slot></slot>
+  </div>
+</template>

src/components/Hero.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  title: {
+    type: String,
+    default: "Become a Vue Dev!",
+  },
+  subtitle: {
+    type: String,
+    default: "Find the Vue job that fits your skills and needs.",
+  },
+});
+</script>
+<template>
+  <section class="bg-green-700 py-20 mb-4">
+    <div
+      class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
+    >
+      <div class="text-center">
+        <h1 class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl">
+          {{ title }}
+        </h1>
+        <p class="my-4 text-xl text-white">
+          {{ subtitle }}
+        </p>
+      </div>
+    </div>
+  </section>
+</template>

src/components/HomeCards.vue

@@ -0,0 +1,36 @@
+<script setup>
+import Card from "@/components/Card.vue";
+</script>
+
+<template>
+  <section class="py-4">
+    <div class="container-xl lg:container m-auto">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
+        <Card>
+          <h2 class="text-2xl font-bold">For Developers</h2>
+          <p class="mt-2 mb-4">
+            Browse our Vue jobs and start your career today
+          </p>
+          <a
+            href="jobs.html"
+            class="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
+          >
+            Browse Jobs
+          </a>
+        </Card>
+        <Card bg="bg-green-100">
+          <h2 class="text-2xl font-bold">For Employers</h2>
+          <p class="mt-2 mb-4">
+            List your job to find the perfect developer for the role
+          </p>
+          <a
+            href="add-job.html"
+            class="inline-block bg-green-500 text-white rounded-lg px-4 py-2 hover:bg-green-600"
+          >
+            Add Job
+          </a>
+        </Card>
+      </div>
+    </div>
+  </section>
+</template>

src/components/JobListing.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { defineProps, ref, computed } from "vue";
+
+const props = defineProps({ job: Object });
+
+const showFullDesc = ref(false);
+
+const toggleFullDescription = () => {
+  showFullDesc.value = !showFullDesc.value;
+};
+
+const truncatedDescription = computed(() => {
+  let description = props.job.description;
+  if (!showFullDesc.value) {
+    description = description.substring(0, 90) + "...";
+  }
+  return description;
+});
+</script>
+<template>
+  <div class="bg-white rounded-xl shadow-md relative">
+    <div class="p-4">
+      <div class="mb-6">
+        <div class="text-gray-600 my-2">{{ job.type }}</div>
+        <h3 class="text-xl font-bold">{{ job.title }}</h3>
+      </div>
+
+      <div class="mb-5">
+        <div>{{ truncatedDescription }}</div>
+        <button
+          @click="toggleFullDescription"
+          class="text-green-500 hover:text-green-600 mb-5"
+        >
+          {{ showFullDesc ? "Less" : "More" }}
+        </button>
+      </div>
+
+      <h3 class="text-green-500 mb-2">{{ job.salary }} / Year</h3>
+
+      <div class="border border-gray-100 mb-5"></div>
+
+      <div class="flex flex-col lg:flex-row justify-between mb-4">
+        <div class="text-orange-700 mb-3">
+          <i class="fa-solid fa-location-dot text-lg"></i>
+          {{ job.location }}
+        </div>
+        <a
+          :href="'/job/' + job.id"
+          class="h-[36px] bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-center text-sm"
+        >
+          Read More
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

src/components/JobListings.vue

@@ -0,0 +1,37 @@
+<script setup>
+import jobData from "@/jobs.json";
+import { ref, defineProps } from "vue";
+import JobListing from "./JobListing.vue";
+const jobs = ref(jobData);
+
+defineProps({
+  limit: Number,
+  showButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <section class="bg-blue-50 px-4 py-10">
+    <div class="container-xl lg:container m-auto">
+      <h2 class="text-3xl font-bold text-green-500 mg-6 text-center">
+        Browse Jobs!
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <JobListing
+          v-for="job in jobs.slice(0, limit || jobs.length)"
+          :key="job.id"
+          :job="job"
+        />
+      </div>
+    </div>
+  </section>
+  <section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
+    <a
+      href="/jobs"
+      class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
+      >View All Jobs</a
+    >
+  </section>
+</template>