crowd-funder-for-time-pwa/src/views/ProjectsView.vue

<template>
  <section id="Content" class="p-6 pb-24">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
      My Projects
    </h1>

    <!-- Quick Search -->
    <form id="QuickSearch" class="mb-4 flex">
      <input
        type="text"
        placeholder="Search…"
        class="block w-full rounded-l border-r-0 border-slate-400"
      />
      <button
        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
      >
        <i class="fa-solid fa-magnifying-glass fa-fw"></i>
      </button>
    </form>

    <!-- New Project -->
    <button
      class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"
      @click="onClickNewProject()"
    >
      <fa icon="plus" class="fa-fw"></fa>
    </button>

    <!-- Results List -->
    <ul class="">
      <li class="border-b border-slate-300">
        <a href="project-view.html" class="block py-4 flex gap-4">
          <div class="flex-none w-12">
            <img
              src="https://picsum.photos/200/200?random=1"
              class="w-full rounded"
            />
          </div>

          <div class="grow overflow-hidden">
            <h2 class="text-base font-semibold">Canyon cleanup</h2>
            <div class="text-sm truncate">
              The quick brown fox jumps over the lazy dog. The quick brown fox
              jumps over the lazy dog.
            </div>
          </div>
        </a>
      </li>

      <li class="border-b border-slate-300">
        <a href="project-view.html" class="block py-4 flex gap-4">
          <div class="flex-none w-12">
            <img
              src="https://picsum.photos/200/200?random=2"
              class="w-full rounded"
            />
          </div>

          <div class="grow overflow-hidden">
            <h2 class="text-base font-semibold">Potluck with neighbors</h2>
            <div class="text-sm truncate">
              The quick brown fox jumps over the lazy dog. The quick brown fox
              jumps over the lazy dog.
            </div>
          </div>
        </a>
      </li>

      <li class="border-b border-slate-300">
        <a href="project-view.html" class="block py-4 flex gap-4">
          <div class="flex-none w-12">
            <img
              src="https://picsum.photos/200/200?random=3"
              class="w-full rounded"
            />
          </div>

          <div class="grow overflow-hidden">
            <h2 class="text-base font-semibold">Historical site</h2>
            <div class="text-sm truncate">
              The quick brown fox jumps over the lazy dog. The quick brown fox
              jumps over the lazy dog.
            </div>
          </div>
        </a>
      </li>
    </ul>
  </section>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  components: {},
})
export default class ProjectsView extends Vue {
  onClickNewProject(): void {
    const route = {
      name: "new-edit-project",
    };
    console.log(route);
    this.$router.push(route);
  }
}
</script>