File size: 1,130 Bytes
6ce4ca6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script lang="ts">
	import { Container, SVG, Text } from "threlte-uikit";

	interface Props {
		text: string;
		icon?: string;
		color?: string;
		backgroundOpacity?: number;
		textOpacity?: number;
		textSize?: number;
		iconSize?: number;
		paddingX?: number;
		paddingY?: number;
		borderRadius?: number;
		marginBottom?: number;
		onclick?: () => void;
	}

	let {
		text,
		icon,
		color = "rgb(139, 69, 219)",
		backgroundOpacity = 0.1,
		textOpacity = 0.7,
		textSize = 10,
		iconSize = 8,
		paddingX = 12,
		paddingY = 4,
		borderRadius = 20,
		marginBottom = 6,
		onclick
	}: Props = $props();
</script>

<Container
	backgroundColor={color}
	{backgroundOpacity}
	{borderRadius}
	{paddingX}
	{paddingY}
	{marginBottom}
	flexDirection="row"
	alignItems="center"
	gap={6}
	pointerEvents={onclick ? "auto" : "none"}
	cursor={onclick ? "pointer" : "default"}
	{onclick}
>
	{#if icon}
		<SVG
			width={iconSize}
			height={iconSize}
			{color}
			opacity={textOpacity}
			src={icon}
		/>
	{/if}
	
	<Text
		{text}
		fontSize={textSize}
		fontWeight="light"
		{color}
		opacity={textOpacity}
		textAlign="center"
	/>
</Container>