Hugging Face's logo

Spaces:
blanchon
/
RobotHub-Frontend
Running

App Files Community
RobotHub-Frontend
File size: 2,118 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<script lang="ts">
	import { Container, Text } from "threlte-uikit";

	interface Props {
		title?: string;
		subtitle?: string;
		description?: string;
		color?: string;
		variant?: 'primary' | 'secondary' | 'tertiary';
		size?: 'sm' | 'md' | 'lg';
		align?: 'left' | 'center' | 'right';
		children?: import('svelte').Snippet;
	}

	let {
		title,
		subtitle,
		description,
		color = "rgb(221, 214, 254)",
		variant = 'primary',
		size = 'md',
		align = 'center',
		children
	}: Props = $props();

	// Predefined opacity levels for consistency
	const opacityLevels = {
		primary: { title: 1.0, subtitle: 0.9, description: 0.8 },
		secondary: { title: 0.9, subtitle: 0.8, description: 0.7 },
		tertiary: { title: 0.8, subtitle: 0.7, description: 0.6 }
	};

	// Predefined size configurations
	const sizeConfigs = {
		sm: { title: 10, subtitle: 9, description: 8, gap: 1, padding: 6 },
		md: { title: 12, subtitle: 10, description: 9, gap: 2, padding: 8 },
		lg: { title: 14, subtitle: 12, description: 10, gap: 3, padding: 10 }
	};

	const config = sizeConfigs[size];
	const opacities = opacityLevels[variant];

	const flexAlign = align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center';
</script>

<Container
	padding={config.padding}
	marginBottom={4}
	width="100%"
>
	{#if children}
		{@render children()}
	{:else}
		<Container 
			flexDirection="column" 
			alignItems={flexAlign}
			justifyContent="center"
			gap={config.gap}
			width="100%"
		>
			{#if title}
				<Text
					text={title}
					fontSize={config.title}
					{color}
					opacity={opacities.title}
					textAlign={align}
					width="100%"
				/>
			{/if}
			
			{#if subtitle}
				<Text
					text={subtitle}
					fontSize={config.subtitle}
					fontWeight="normal"
					{color}
					opacity={opacities.subtitle}
					textAlign={align}
					width="100%"
				/>
			{/if}
			
			{#if description}
				<Text
					text={description}
					fontSize={config.description}
					fontWeight="light"
					{color}
					opacity={opacities.description}
					textAlign={align}
					width="100%"
				/>
			{/if}
		</Container>
	{/if}
</Container>