<template> <!-- QUICK NAV --> <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50"> <ul class="flex text-2xl p-2 gap-2"> <!-- Home Feed --> <li class="basis-1/5 rounded-md text-slate-500"> <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1" ><fa icon="house-chimney" class="fa-fw"></fa ></router-link> </li> <!-- Search --> <li class="basis-1/5 rounded-md bg-slate-400 text-white"> <router-link :to="{ name: 'discover' }" class="block text-center py-3 px-1" ><fa icon="magnifying-glass" class="fa-fw"></fa ></router-link> </li> <!-- Projects --> <li class="basis-1/5 rounded-md text-slate-500"> <router-link :to="{ name: 'projects' }" class="block text-center py-3 px-1" ><fa icon="folder-open" class="fa-fw"></fa ></router-link> </li> <!-- Contacts --> <li class="basis-1/5 rounded-md text-slate-500"> <router-link :to="{ name: 'contacts' }" class="block text-center py-3 px-1" ><fa icon="users" class="fa-fw"></fa ></router-link> </li> <!-- Profile --> <li class="basis-1/5 rounded-md text-slate-500"> <router-link :to="{ name: 'account' }" class="block text-center py-3 px-1" ><fa icon="circle-user" class="fa-fw"></fa ></router-link> </li> </ul> </nav> <!-- CONTENT --> <section id="Content" class="p-6 pb-24"> <!-- Heading --> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> Discover </h1> <!-- Quick Search --> <form id="QuickSearch" class="mb-4 flex"> <input type="text" placeholder="Search…" class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2" /> <button class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400" > <fa icon="magnifying-glass" class="fa-fw"></fa> </button> </form> <!-- Result Tabs --> <div class="text-center text-slate-500 border-b border-slate-300"> <ul class="flex flex-wrap justify-center gap-4 -mb-px"> <li> <a href="#" class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold" > Nearby <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md" >20+</span > </a> </li> <li> <a href="#" class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300" > Remote <span class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md" >13</span > </a> </li> </ul> </div> <!-- 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="w-12"> <img src="https://picsum.photos/200/200?random=1" class="w-full rounded" /> </div> <div class="grow"> <h2 class="text-base font-semibold">Canyon cleanup</h2> <div class="text-sm"> <fa icon="user" class="fa-fw text-slate-400"></fa> Rotary </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="w-12"> <img src="https://picsum.photos/200/200?random=2" class="w-full rounded" /> </div> <div class="grow"> <h2 class="text-base font-semibold">Potluck with neighbors</h2> <div class="text-sm"> <fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A. </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="w-12"> <img src="https://picsum.photos/200/200?random=3" class="w-full rounded" /> </div> <div class="grow"> <h2 class="text-base font-semibold">Historical site</h2> <div class="text-sm"> <fa icon="user" class="fa-fw text-slate-400 mr-1"></fa> <em>Unknown</em> </div> </div> </a> </li> </ul> </section> </template> <script lang="ts"> import { Options, Vue } from "vue-class-component"; @Options({ components: {}, }) export default class DiscoverView extends Vue {} </script>