traxxx/assets/components/networks/networks.vue

<template>
    <div class="networks">
        <input
            :placeholder="`Find ${siteCount} sites in ${networks.length} networks`"
            class="search"
        >

        <div 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';

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,
    },
    data() {
        return {
            networks: [],
            pageTitle: null,
        };
    },
    computed: {
        siteCount,
    },
    mounted,
};
</script>

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

.networks {
    padding: 0 1rem;
}

.search {
    width: 100%;
    max-width: 40rem;
    box-sizing: border-box;
    padding: 1rem;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 0 3px $shadow-weak;
    margin: 1rem 0;
    font-size: 1rem;
    outline: none;

    &:focus {
        box-shadow: 0 0 3px $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>