traxxx/assets/components/networks/networks.vue

<template>
	<div class="networks">
		<form
			class="search"
			@submit.prevent="searchSites"
		>
			<input
				v-model="query"
				:placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
				class="query"
				@input="searchSites"
			>

			<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}`"
				:network="network"
			/>
		</div>
	</div>
</template>

<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,
	});
}

async function mounted() {
	this.networks = await this.$store.dispatch('fetchNetworks');
	this.pageTitle = 'Networks';
}

function siteCount() {
	return this.networks.map(network => network.sites).flat().length;
}

export default {
	components: {
		Network,
		Site,
	},
	data() {
		return {
			query: '',
			pageTitle: null,
			networks: [],
			searchResults: [],
		};
	},
	computed: {
		siteCount,
	},
	mounted,
	methods: {
		searchSites,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.networks {
    padding: 0 1rem;
}

.search {
    display: flex;
    width: 100%;
    max-width: 40rem;
}

.query {
    color: var(--text);
    background: var(--background);
    flex-grow: 1;
    box-sizing: border-box;
    padding: 1rem;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 0 3px var(--darken-weak);
    margin: 1rem 0;
    font-size: 1rem;
    outline: none;

    &:focus {
        box-shadow: 0 0 3px var(--primary);
    }
}

.search-button {
    padding: 1rem;
    background: none;
    border: none;

    .icon {
        fill: var(--shadow);
    }

    &:hover {
        cursor: pointer;

        .icon {
            fill: var(--primary);
        }
    }
}

.network-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 1rem;
    padding: 1rem 0;
}

@media(max-width: $breakpoint) {
    .networks {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}
</style>