Added new projects view

src/main.ts

@@ -21,6 +21,7 @@ import {
   faQrcode,
   faUser,
   faPen,
+  faPlus,
   faTrashCan,
   faCalendar,
   faEllipsisVertical,
@@ -40,6 +41,7 @@ library.add(
   faQrcode,
   faUser,
   faPen,
+  faPlus,
   faTrashCan,
   faCalendar,
   faEllipsisVertical,

src/views/DiscoverView.vue

@@ -19,7 +19,7 @@
       <!-- Projects -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <router-link
-          :to="{ name: 'project' }"
+          :to="{ name: 'projects' }"
           class="block text-center py-3 px-1"
           ><fa icon="folder-open" class="fa-fw"></fa
         ></router-link>

src/views/ProjectsView.vue

@@ -1,3 +1,89 @@
 <template>
-  <section id="Content" class="p-6 pb-24"></section>
+  <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"
+    >
+      <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>