ink/examples/box-backgrounds/box-backgrounds.tsx at master · vadimdemedes/ink · GitHub

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React from 'react';
import {Box, Text} from '../../src/index.js';

function BoxBackgrounds() {
	return (
		<Box flexDirection="column" gap={1}>
			<Text bold>Box Background Examples:</Text>

			<Box>
				<Text>1. Standard red background (10x3):</Text>
			</Box>
			<Box backgroundColor="red" width={10} height={3} alignSelf="flex-start">
				<Text>Hello</Text>
			</Box>

			<Box>
				<Text>2. Blue background with border (12x4):</Text>
			</Box>
			<Box
				backgroundColor="blue"
				borderStyle="round"
				width={12}
				height={4}
				alignSelf="flex-start"
			>
				<Text>Border</Text>
			</Box>

			<Box>
				<Text>3. Green background with padding (14x4):</Text>
			</Box>
			<Box
				backgroundColor="green"
				padding={1}
				width={14}
				height={4}
				alignSelf="flex-start"
			>
				<Text>Padding</Text>
			</Box>

			<Box>
				<Text>4. Yellow background with center alignment (16x3):</Text>
			</Box>
			<Box
				backgroundColor="yellow"
				width={16}
				height={3}
				justifyContent="center"
				alignSelf="flex-start"
			>
				<Text>Centered</Text>
			</Box>

			<Box>
				<Text>5. Magenta background, column layout (12x5):</Text>
			</Box>
			<Box
				backgroundColor="magenta"
				flexDirection="column"
				width={12}
				height={5}
				alignSelf="flex-start"
			>
				<Text>Line 1</Text>
				<Text>Line 2</Text>
			</Box>

			<Box>
				<Text>6. Hex color background #FF8800 (10x3):</Text>
			</Box>
			<Box
				backgroundColor="#FF8800"
				width={10}
				height={3}
				alignSelf="flex-start"
			>
				<Text>Hex</Text>
			</Box>

			<Box>
				<Text>7. RGB background rgb(0,255,0) (10x3):</Text>
			</Box>
			<Box
				backgroundColor="rgb(0,255,0)"
				width={10}
				height={3}
				alignSelf="flex-start"
			>
				<Text>RGB</Text>
			</Box>

			<Box>
				<Text>8. Text inheritance test:</Text>
			</Box>
			<Box backgroundColor="cyan" alignSelf="flex-start">
				<Text>Inherited </Text>
				<Text backgroundColor="red">Override </Text>
				<Text>Back to inherited</Text>
			</Box>

			<Box>
				<Text>9. Nested background inheritance:</Text>
			</Box>
			<Box backgroundColor="blue" alignSelf="flex-start">
				<Text>Outer: </Text>
				<Box backgroundColor="yellow">
					<Text>Inner: </Text>
					<Text backgroundColor="red">Deep</Text>
				</Box>
			</Box>

			<Box marginTop={1}>
				<Text>Press Ctrl+C to exit</Text>
			</Box>
		</Box>
	);
}

export default BoxBackgrounds;