<script module lang="ts">
	export { storeButton };
	import gumroad from "./sidebar/gumroad.png";
	import jinxxy from "./sidebar/jinxxy.png";
</script>

{#snippet storeButton(store: string, url: string)}
	<a aria-label="Store Page Button" class="StoreButton" href={url}>
		{#if store == "gumroad"}
			<img src={gumroad} />
		{:else if store == "jinxxy"}
			<img src={jinxxy} />
		{/if}
	</a>
{/snippet}

<style lang="scss">
	.StoreButton {
		display: block;
		width: 100%;
		height: 45px;
		border: 3px outset #1da1f2;
		background: #1da1f2;
		padding: 2px;
		text-align: center;

		img {
			height: auto;
			width: 45px;
		}
	}
	.StoreButton:hover {
		filter: brightness(110%);
	}

	.StoreButton:active {
		border-style: inset;

		img {
			transform: translate(2px, 2px);
		}
	}
</style>
