File size: 1,005 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
<script lang="ts">
	import type { Robot } from "$lib/elements/robot/Robot.svelte";
	import { ICON } from "$lib/utils/icon";
	import { 
		BaseStatusBox, 
		StatusHeader, 
		StatusContent, 
		StatusButton
	} from "$lib/components/3d/ui";

	interface Props {
		robot: Robot;
		onRobotBoxClick: (robot: Robot) => void;
	}

	let { robot, onRobotBoxClick }: Props = $props();

	const robotColor = "rgb(245, 158, 11)";
</script>


<BaseStatusBox
	color={robotColor}
	borderOpacity={0.6}
	backgroundOpacity={0.2}
	onclick={() => onRobotBoxClick(robot)}
>
		<!-- Robot Header -->
		<StatusHeader
			icon={ICON["icon-[ix--robotic-arm]"].svg}
			text="ROBOT"
			color={robotColor}
			opacity={0.9}
		/>

		<!-- Robot Info -->
		<StatusContent
			title={robot.id}
			subtitle="Active"
			color={robotColor}
			variant="primary"
		/>

		<!-- Status Button -->
		<StatusButton
			text="Active"
			icon={ICON["icon-[iconamoon--lightning-1-duotone]"].svg}
			color={robotColor}
			textOpacity={0.8}
		/>
</BaseStatusBox>