Added PG site search function and enabled site search bar. Added Full Porn network assets.

assets/components/networks/networks.vue

@@ -1,11 +1,39 @@
 <template>
     <div class="networks">
-        <input
-            :placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
+        <form
             class="search"
+            @submit.prevent="searchSites"
         >
+            <input
+                v-model="query"
+                :placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
+                class="query"
+                @input="searchSites"
+            >
 
-        <div class="network-tiles">
+            <button
+                type="submit"
+                class="search-button"
+            ><Icon icon="search" /></button>
+        </form>
+
+        <div
+            v-if="query.length"
+            class="network-tiles"
+        >
+            <Site
+                v-for="site in searchResults"
+                :key="`site-tile-${site.slug}`"
+                :site="site"
+            />
+
+            <span v-if="searchResults.length === 0">No results for "{{ query }}"</span>
+        </div>
+
+        <div
+            v-if="query.length === 0"
+            class="network-tiles"
+        >
             <Network
                 v-for="network in networks"
                 :key="`network-tile-${network.slug}`"
@@ -17,6 +45,16 @@
 
 <script>
 import Network from '../tile/network.vue';
+import Site from '../tile/site.vue';
+
+async function searchSites() {
+    this.searchResults = await this.$store.dispatch('searchSites', {
+        query: this.query,
+        limit: 20,
+    });
+
+    console.log(this.searchResults);
+}
 
 async function mounted() {
     this.networks = await this.$store.dispatch('fetchNetworks');
@@ -30,17 +68,23 @@ function siteCount() {
 export default {
     components: {
         Network,
+        Site,
     },
     data() {
         return {
-            networks: [],
+            query: '',
             pageTitle: null,
+            networks: [],
+            searchResults: [],
         };
     },
     computed: {
         siteCount,
     },
     mounted,
+    methods: {
+        searchSites,
+    },
 };
 </script>
 
@@ -52,8 +96,13 @@ export default {
 }
 
 .search {
+    display: flex;
     width: 100%;
     max-width: 40rem;
+}
+
+.query {
+    flex-grow: 1;
     box-sizing: border-box;
     padding: 1rem;
     border: none;
@@ -68,6 +117,24 @@ export default {
     }
 }
 
+.search-button {
+    padding: 1rem;
+    background: none;
+    border: none;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: $primary;
+        }
+    }
+}
+
 .network-tiles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));