<script>
    import Cloud from "$lib/assets/cloud.svg?component";
    import Vault from "$lib/assets/vault.svg?component";
    import GitBranch from "$lib/assets/git-branch.svg?component";
    import Metrics from "$lib/assets/chart.svg?component";
</script>

<div >
	<a href="https://cloud.jnss.me"><Cloud /><span>Cloud</span></a>
	<a href="https://git.jnss.me"><GitBranch /><span>Git</span></a>
	<a href="https://vault.jnss.me"><Vault /><span>Vault</span></a>
	<a href="https://metrics.jnss.me"><Metrics /><span>Metrics</span></a>
</div>

<style>
    div {
            --card-size: 150px;

            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--spacing50);

            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: var(--spacing50);
                gap: var(--spacing30);

                width: var(--card-size);
                height: var(--card-size);

                color: var(--text-color-primary);
                border: var(--border-size) solid var(--border-color);
                border-radius: var(--border-radius);

                span {
                    font-size: 1.25rem;
                }
            }
        }
</style>

