src/lib/components/3d/ui/StatusArrow.svelte

<script lang="ts">
	import { Container, SVG } from "threlte-uikit";
	import { ICON } from "$lib/utils/icon";

	interface Props {
		color?: string;
		opacity?: number;
		size?: number;
		direction?: 'right' | 'down' | 'left' | 'up';
		minWidth?: number;
		minHeight?: number;
	}

	let {
		color = "rgb(139, 69, 219)",
		opacity = 1,
		size = 12,
		direction = 'right',
		minWidth = 20,
		minHeight = 12
	}: Props = $props();
</script>

<Container
	flexDirection="row"
	alignItems="center"
	justifyContent="center"
	gap={12}
	{minWidth}
	{minHeight}
>
	{#if direction === 'right'}
		<SVG
			width={size}
			height={size}
			{color}
			{opacity}
			src={ICON[`icon-[formkit--arrowright]`].svg}
		/>
	{:else if direction === 'down'}
		<SVG
			width={size}
			height={size}
			{color}
			{opacity}
			src={ICON[`icon-[formkit--arrowdown]`].svg}
		/>
		{:else if direction === 'left'}
		<SVG
			width={size}
			height={size}
			{color}
			{opacity}
			src={ICON[`icon-[formkit--arrowleft]`].svg}
		/>
	{:else if direction === 'up'}
		<SVG
			width={size}
			height={size}
			{color}
			{opacity}
			src={ICON[`icon-[formkit--arrowup]`].svg}
		/>
	{/if}
</Container>