<script>
	import TechCard from './techCard.svelte';

	let { cat, tech_vec } = $props();
</script>

<div class="tech-cat">
	<h3>{cat}</h3>
	<div class="tech-row">
		{#each tech_vec as tech}
			<TechCard tech_props={tech} />
		{/each}
	</div>
</div>

<style>
	:root {
		--tech-gap: 4svw;
	}

	h3 {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		display: flex;
		margin: 2svh 2svw;
		padding: 0svh 2svw;
		padding-bottom: 1svh;
	}

	.tech-cat {
		padding: 0px 1svw;
		padding-bottom: 2svh;
		margin-bottom: 3svh;
		flex: 1 1 auto;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
	}

	.tech-row {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		row-gap: 1svh;
	}
</style>
