create-asciitorium 0.1.24 → 0.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/templates/base/index.html +1 -1
- package/dist/templates/base/public/art/asciitorium.txt +7 -7
- package/dist/templates/base/public/art/borders/bubbles.txt +16 -0
- package/dist/templates/base/public/art/borders/dna.txt +9 -0
- package/dist/templates/base/public/art/mazes/example.txt +21 -0
- package/dist/templates/base/public/images/logo.png +0 -0
- package/dist/templates/base/src/main.tsx +10 -7
- package/package.json +1 -1
- package/dist/templates/base/src/examples/AsciiArtExample.tsx +0 -9
- package/dist/templates/base/src/examples/ButtonExample.tsx +0 -21
- package/dist/templates/base/src/examples/LayoutExample.tsx +0 -45
- package/dist/templates/base/src/examples/MultiSelectExample.tsx +0 -51
- package/dist/templates/base/src/examples/ProgressBarExample.tsx +0 -42
- package/dist/templates/base/src/examples/SelectExample.tsx +0 -40
- package/dist/templates/base/src/examples/TabsExample.tsx +0 -54
- package/dist/templates/base/src/examples/TextExample.tsx +0 -24
- package/dist/templates/base/src/examples/TextInputExample.tsx +0 -25
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/png" href="/images/logo.png" />
|
|
5
6
|
<title>asciitorium</title>
|
|
6
|
-
<link rel="icon" type="image/png" href="/logo.png" />
|
|
7
7
|
<link rel="stylesheet" href="index.css" />
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
@@ -2,37 +2,37 @@
|
|
|
2
2
|
_ _ _ _
|
|
3
3
|
__ _ ___ ___(_|_) |_ ___ _ __(_)_ _ _ __ ___
|
|
4
4
|
╱ _` ╱ __|╱ __| | | __╱ _ ╲| '__| | | | | '_ ` _ ╲
|
|
5
|
-
|
|
5
|
+
| (_| ╲__ ╲ (__| | | || (_) | | | | |_| | | | | | ⎸
|
|
6
6
|
╲__,_|___╱╲___|_|_|╲__╲___╱|_| |_|╲__,_|_| |_| |_⎸
|
|
7
7
|
¶ {"duration":8000}
|
|
8
8
|
_ _ _
|
|
9
9
|
__ _ ___ ___(_| )/|_ ___ _ __(_)_ _ _ __ .
|
|
10
10
|
╱y_` ╱ __|╱\__| |\| __╱ _/╲| '__|/| |. \| '_ ` _/╲.
|
|
11
|
-
|
|
11
|
+
| (_| ╲__ ╲ (__|/| | || (_) |/| | | |_| | | | | | ⎸
|
|
12
12
|
╲__,_|__\╱╲___|_|_|╲__╲_y_╱|_| |_|╲__,_|_| |y| |_⎸
|
|
13
13
|
¶ {"duration":1000}
|
|
14
14
|
. _ * _ * .
|
|
15
15
|
__ _ ___ ___(_|_).|_ * _ __(_)_ _ * __
|
|
16
16
|
╱ _` ╱ __|╱ _ . | __╱ . ╲ '__| | | | ' ` ╲ .
|
|
17
|
-
|
|
17
|
+
| (_| ╲__ (__| *|.| || (_) | * | | |_| *| | | ⎸ .
|
|
18
18
|
╲__,_|___╱╲__ ._|_|╲__╲ * ╱|_| .|╲__ |_| |_⎸
|
|
19
19
|
¶ {"duration":140}
|
|
20
20
|
* _ * . * . *
|
|
21
21
|
__ * (_|_) . * _ __ . . __
|
|
22
22
|
╱ ` __| | __╱ * ╲ '__| * ` ╲
|
|
23
|
-
|
|
23
|
+
| * * ╲__ | | || (_) | . | * * | | ⎸
|
|
24
24
|
. .|___╱ |_| ╲__╲___╱|_| . . |_| . |_⎸
|
|
25
25
|
¶ {"duration":140}
|
|
26
26
|
. * . _ * . . .
|
|
27
27
|
__ * * (_|_). . * _ * . __
|
|
28
28
|
╱ _` * __| | __╱ * * ╲ '__| . * _ ╲
|
|
29
|
-
|
|
29
|
+
| (_| * ╲__ | || (_) . | * . * | | ⎸
|
|
30
30
|
. ._|___╱ |_| ╲__╲ * |_| . * |_| |_⎸
|
|
31
31
|
¶ {"duration":160}
|
|
32
32
|
. * . _ * . * . .
|
|
33
33
|
* . (_|_) . . * . * .
|
|
34
34
|
╱ ` * __| __╱ * . * . * . ╲
|
|
35
|
-
|
|
35
|
+
| * * ╲__ | (_)* . * . * . | ⎸
|
|
36
36
|
. .|___╱ |_| * . * . . |_|
|
|
37
37
|
¶ {"duration":140}
|
|
38
38
|
. * . . * . .
|
|
@@ -108,4 +108,4 @@
|
|
|
108
108
|
_ _ _ _
|
|
109
109
|
__ _ ___ ___(_|_) |_ ___ _ __(_)_ _ _ __ ___
|
|
110
110
|
╱ _` ╱ __|╱ __| | | __╱ _ ╲| '__| | | | | '_ ` _ ╲
|
|
111
|
-
|
|
111
|
+
| (_| ╲__ ╲ (__| | | || (_) | | | | |_| | | | | | ⎸
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
╭───────────────────────────────────┬───╮
|
|
2
|
+
│ │ │
|
|
3
|
+
│ ╷ ╭───────────────┬───────╮ ╰─o─┤
|
|
4
|
+
│ │ │ │ │ │
|
|
5
|
+
│ │ ╵ ╶───────╮ ├─o─╮ ╰───╮ │
|
|
6
|
+
│ │ │ │ │ │ │
|
|
7
|
+
│ ╰───────┬───────╯ ├───┤ ╭───╯ │
|
|
8
|
+
│ │ │ │ │ │
|
|
9
|
+
├───────────╯ ╭───────┴─o─┤ │ ╶───┤
|
|
10
|
+
│ │ │ │ │
|
|
11
|
+
│ ╭───╴ ╭───╯ ╭───────╯ ├───╮ │
|
|
12
|
+
│ │ │ │ │ │ │
|
|
13
|
+
│ ╰───┬─o─┤ ╭───┤ ╶───╮ ├─o─┤ │
|
|
14
|
+
│ │ │ │ │ │ │ │ │
|
|
15
|
+
├───╮ ╰───╯ ├─o─╯ ╷ │ ╵ │ │
|
|
16
|
+
│ │ │ │ │ │ │
|
|
17
|
+
├─o─┴───────────┤ ╭───╯ ├───────┤ │
|
|
18
|
+
│ │ │ │ │ │
|
|
19
|
+
│ ╶───╮ ╶───╯ │ ╶───╯ ╷ ╵ │
|
|
20
|
+
│ │ │ │ │
|
|
21
|
+
╰───────┴───────────┴───────────┴───────╯
|
|
Binary file
|
|
@@ -19,6 +19,7 @@ import {
|
|
|
19
19
|
TextExample,
|
|
20
20
|
AsciiArtExample,
|
|
21
21
|
SlidersExample,
|
|
22
|
+
AsciiMazeExample,
|
|
22
23
|
} from 'asciitorium/examples';
|
|
23
24
|
|
|
24
25
|
// Load the title ASCII art
|
|
@@ -33,6 +34,7 @@ const selectedComponent = new PersistentState(
|
|
|
33
34
|
// Component list for navigation
|
|
34
35
|
const componentList = [
|
|
35
36
|
'AsciiArt',
|
|
37
|
+
'AsciiMaze',
|
|
36
38
|
'Button',
|
|
37
39
|
'CelticBorder',
|
|
38
40
|
'MultiSelect',
|
|
@@ -46,33 +48,34 @@ const componentList = [
|
|
|
46
48
|
|
|
47
49
|
// Component mapping for dynamic content
|
|
48
50
|
const examples = {
|
|
51
|
+
AsciiArt: AsciiArtExample,
|
|
52
|
+
AsciiMaze: AsciiMazeExample,
|
|
49
53
|
Button: ButtonExample,
|
|
50
54
|
CelticBorder: CelticBorderExample,
|
|
51
|
-
Select: SelectExample,
|
|
52
55
|
MultiSelect: MultiSelectExample,
|
|
53
56
|
RelativeSizing: RelativeSizingExample,
|
|
54
|
-
|
|
57
|
+
Select: SelectExample,
|
|
55
58
|
Sliders: SlidersExample,
|
|
56
59
|
Tabs: TabsExample,
|
|
57
60
|
Text: TextExample,
|
|
58
|
-
|
|
61
|
+
TextInput: TextInputExample,
|
|
59
62
|
};
|
|
60
63
|
|
|
61
64
|
const app = (
|
|
62
65
|
<App>
|
|
63
66
|
<AsciiArt content={titleArt} align="center" gap={{ bottom: 2 }} />
|
|
64
|
-
<Row height="
|
|
67
|
+
<Row height="fill">
|
|
65
68
|
<Select
|
|
66
69
|
label="Components:"
|
|
67
70
|
width="30%"
|
|
68
|
-
height="
|
|
71
|
+
height="fill"
|
|
69
72
|
items={componentList}
|
|
70
73
|
selectedItem={selectedComponent}
|
|
71
74
|
border
|
|
72
75
|
/>
|
|
73
76
|
<Component
|
|
74
|
-
width="
|
|
75
|
-
height="
|
|
77
|
+
width="fill"
|
|
78
|
+
height="fill"
|
|
76
79
|
dynamicContent={{
|
|
77
80
|
selectedKey: selectedComponent,
|
|
78
81
|
componentMap: examples,
|
package/package.json
CHANGED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { AsciiArt, Box, loadArt } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
const computer = await loadArt('./art/computer.txt');
|
|
4
|
-
|
|
5
|
-
export const AsciiArtExample = () => (
|
|
6
|
-
<Box width={42} height={28} layout="aligned" label="ASCII Art Example:" border>
|
|
7
|
-
<AsciiArt content={computer} align="center" />
|
|
8
|
-
</Box>
|
|
9
|
-
);
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { Text, State, Button, HR, Box } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const ButtonExample = () => {
|
|
4
|
-
// State for button click count - local to each component instance
|
|
5
|
-
const buttonClickCount = new State(0);
|
|
6
|
-
|
|
7
|
-
return (
|
|
8
|
-
<Box width={42} height={28} label="Button Example:" border>
|
|
9
|
-
<Button
|
|
10
|
-
label="I'm a Button!"
|
|
11
|
-
align="center"
|
|
12
|
-
onClick={() => (buttonClickCount.value = buttonClickCount.value + 1)}
|
|
13
|
-
gap={{top: 4, bottom: 3}}
|
|
14
|
-
/>
|
|
15
|
-
<Box layout="row" gap={{left: 6, right: 2}} align="center">
|
|
16
|
-
<Text>Click Count: </Text>
|
|
17
|
-
<Text width={4}>{buttonClickCount}</Text>
|
|
18
|
-
</Box>
|
|
19
|
-
</Box>
|
|
20
|
-
);
|
|
21
|
-
};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { Text, HR, VR, Box, CelticBorder } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const LayoutExample = () => (
|
|
4
|
-
<Box width={42} height={27} border layout="column">
|
|
5
|
-
<Text
|
|
6
|
-
width={40}
|
|
7
|
-
height={2}
|
|
8
|
-
>
|
|
9
|
-
Layout Components - HR, VR, Box, Borders
|
|
10
|
-
</Text>
|
|
11
|
-
<HR gap={1} />
|
|
12
|
-
<Box
|
|
13
|
-
width={20}
|
|
14
|
-
height={5}
|
|
15
|
-
border
|
|
16
|
-
gap={1}
|
|
17
|
-
children={[
|
|
18
|
-
new Text({
|
|
19
|
-
width: 16,
|
|
20
|
-
height: 3,
|
|
21
|
-
children: ['Box with border\nand content'],
|
|
22
|
-
}),
|
|
23
|
-
]}
|
|
24
|
-
/>
|
|
25
|
-
<CelticBorder
|
|
26
|
-
width={20}
|
|
27
|
-
height={5}
|
|
28
|
-
gap={1}
|
|
29
|
-
children={[
|
|
30
|
-
new Text({
|
|
31
|
-
width: 16,
|
|
32
|
-
height: 3,
|
|
33
|
-
children: ['Celtic border\ndecoration'],
|
|
34
|
-
}),
|
|
35
|
-
]}
|
|
36
|
-
/>
|
|
37
|
-
<HR gap={1} />
|
|
38
|
-
<Text
|
|
39
|
-
width={35}
|
|
40
|
-
height={2}
|
|
41
|
-
>
|
|
42
|
-
Layout components help organize\nand structure your UI.
|
|
43
|
-
</Text>
|
|
44
|
-
</Box>
|
|
45
|
-
);
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { Text, State, MultiSelect, Box, HR } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const MultiSelectExample = () => {
|
|
4
|
-
const multiValue = new State(['Suspension', 'Brakes']);
|
|
5
|
-
const displayText = new State(multiValue.value.join(', '));
|
|
6
|
-
|
|
7
|
-
multiValue.subscribe((newValue) => {
|
|
8
|
-
displayText.value = newValue.join(', ');
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const carParts = [
|
|
12
|
-
'Engine',
|
|
13
|
-
'Transmission',
|
|
14
|
-
'Brakes',
|
|
15
|
-
'Suspension',
|
|
16
|
-
'Exhaust',
|
|
17
|
-
'Radiator',
|
|
18
|
-
'Battery',
|
|
19
|
-
'Alternator',
|
|
20
|
-
'Starter',
|
|
21
|
-
'Fuel Pump',
|
|
22
|
-
'Air Filter',
|
|
23
|
-
'Oil Filter',
|
|
24
|
-
'Spark Plugs',
|
|
25
|
-
'Tires',
|
|
26
|
-
'Wheels',
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<Box label="MultiSelect Example:" width={42} height={28} border>
|
|
31
|
-
<MultiSelect
|
|
32
|
-
label="Car Parts:"
|
|
33
|
-
align="center"
|
|
34
|
-
width={34}
|
|
35
|
-
height={10}
|
|
36
|
-
items={carParts}
|
|
37
|
-
selectedItems={multiValue}
|
|
38
|
-
gap={{ top: 2, bottom: 2 }}
|
|
39
|
-
/>
|
|
40
|
-
<Box align="center" layout="row">
|
|
41
|
-
<Text align="top">Selected: </Text>
|
|
42
|
-
<Text
|
|
43
|
-
width={24}
|
|
44
|
-
height={7}
|
|
45
|
-
align="top"
|
|
46
|
-
content={displayText}
|
|
47
|
-
/>
|
|
48
|
-
</Box>
|
|
49
|
-
</Box>
|
|
50
|
-
);
|
|
51
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { Text, State, ProgressBar, Button, Box, HR } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const ProgressBarExample = () => {
|
|
4
|
-
// State for progress bar - local to each component instance
|
|
5
|
-
const progressValue = new State(25);
|
|
6
|
-
|
|
7
|
-
return (
|
|
8
|
-
<Box width={42} height={28} border label="ProgressBar Example:" >
|
|
9
|
-
<Text align="center" gap={{top: 2}}>With Percentage</Text>
|
|
10
|
-
<ProgressBar
|
|
11
|
-
width={35}
|
|
12
|
-
percent={progressValue}
|
|
13
|
-
align="center"
|
|
14
|
-
showPercentage
|
|
15
|
-
/>
|
|
16
|
-
<Text align="center" gap={{top: 2}}>Without Percentage</Text>
|
|
17
|
-
<ProgressBar
|
|
18
|
-
width={35}
|
|
19
|
-
percent={progressValue}
|
|
20
|
-
showPercentage={false}
|
|
21
|
-
align="center"
|
|
22
|
-
/>
|
|
23
|
-
|
|
24
|
-
<Box layout="horizontal" align="center" gap={{ top: 3 }}>
|
|
25
|
-
<Button
|
|
26
|
-
label="Increase"
|
|
27
|
-
onClick={() =>
|
|
28
|
-
(progressValue.value = Math.min(100, progressValue.value + 10))
|
|
29
|
-
}
|
|
30
|
-
gap={1}
|
|
31
|
-
/>
|
|
32
|
-
<Button
|
|
33
|
-
label="Decrease"
|
|
34
|
-
onClick={() =>
|
|
35
|
-
(progressValue.value = Math.max(0, progressValue.value - 10))
|
|
36
|
-
}
|
|
37
|
-
gap={1}
|
|
38
|
-
/>
|
|
39
|
-
</Box>
|
|
40
|
-
</Box>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { Text, State, Select, Box } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const SelectExample = () => {
|
|
4
|
-
const selectValue = new State('Tesla Model S');
|
|
5
|
-
|
|
6
|
-
const carModels = [
|
|
7
|
-
'Tesla Model S',
|
|
8
|
-
'BMW M3',
|
|
9
|
-
'Audi A4',
|
|
10
|
-
'Mercedes C-Class',
|
|
11
|
-
'Honda Civic',
|
|
12
|
-
'Toyota Camry',
|
|
13
|
-
'Ford Mustang',
|
|
14
|
-
'Chevrolet Corvette',
|
|
15
|
-
'Porsche 911',
|
|
16
|
-
'Ferrari 488',
|
|
17
|
-
'Lamborghini Huracan',
|
|
18
|
-
'McLaren 720S',
|
|
19
|
-
'Nissan GTR',
|
|
20
|
-
'Subaru WRX',
|
|
21
|
-
];
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<Box width={42} height={28} label="Select Example:" border>
|
|
25
|
-
<Box align="center" gap={{ top: 2, bottom: 2 }}>
|
|
26
|
-
<Select
|
|
27
|
-
label="Car's to Select:"
|
|
28
|
-
width={34}
|
|
29
|
-
height={10}
|
|
30
|
-
items={carModels}
|
|
31
|
-
selectedItem={selectValue}
|
|
32
|
-
/>
|
|
33
|
-
</Box>
|
|
34
|
-
<Box align="center" gap={{ left: 5 }} layout="row">
|
|
35
|
-
<Text>Car Selected: </Text>
|
|
36
|
-
<Text width={20}>{selectValue}</Text>
|
|
37
|
-
</Box>
|
|
38
|
-
</Box>
|
|
39
|
-
);
|
|
40
|
-
};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { Text, State, Tabs, Box } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const TabsExample = () => {
|
|
4
|
-
// State for tabs - local to each component instance
|
|
5
|
-
const tabsValue = new State('Tab 1');
|
|
6
|
-
|
|
7
|
-
// Dynamic content state based on selected tab
|
|
8
|
-
const tabContentState = new State('');
|
|
9
|
-
tabsValue.subscribe((tab) => {
|
|
10
|
-
switch (tab) {
|
|
11
|
-
case 'Tab 1':
|
|
12
|
-
tabContentState.value =
|
|
13
|
-
'Content for Tab 1\nThis shows dynamic content\nbased on selected tab.';
|
|
14
|
-
break;
|
|
15
|
-
case 'Tab 2':
|
|
16
|
-
tabContentState.value =
|
|
17
|
-
'Content for Tab 2\nDifferent content here!\nTabs make navigation easy.';
|
|
18
|
-
break;
|
|
19
|
-
case 'Tab 3':
|
|
20
|
-
tabContentState.value =
|
|
21
|
-
'Content for Tab 3\nYet another section.\nUse arrow keys to switch.';
|
|
22
|
-
break;
|
|
23
|
-
default:
|
|
24
|
-
tabContentState.value = 'Select a tab above';
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
// Initialize content
|
|
29
|
-
tabContentState.value =
|
|
30
|
-
tabsValue.value === 'Tab 1'
|
|
31
|
-
? 'Content for Tab 1\nThis shows dynamic content\nbased on selected tab.'
|
|
32
|
-
: tabsValue.value === 'Tab 2'
|
|
33
|
-
? 'Content for Tab 2\nDifferent content here!\nTabs make navigation easy.'
|
|
34
|
-
: 'Content for Tab 3\nYet another section.\nUse arrow keys to switch.';
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<Box width={42} height={28} border label="Tabs Example:">
|
|
38
|
-
<Tabs
|
|
39
|
-
tabs={['Tab 1', 'Tab 2', 'Tab 3']}
|
|
40
|
-
align="center"
|
|
41
|
-
selectedTab={tabsValue}
|
|
42
|
-
gap={1}
|
|
43
|
-
/>
|
|
44
|
-
<Box
|
|
45
|
-
width={38}
|
|
46
|
-
height={8}
|
|
47
|
-
gap={1}
|
|
48
|
-
children={[
|
|
49
|
-
new Text({ width: 30, height: 6, children: [tabContentState] }),
|
|
50
|
-
]}
|
|
51
|
-
/>
|
|
52
|
-
</Box>
|
|
53
|
-
);
|
|
54
|
-
};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Text, AsciiArt, Box } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const TextExample = () => (
|
|
4
|
-
<Box width={42} height={28} border label="Text Example:">
|
|
5
|
-
<Text
|
|
6
|
-
width={36}
|
|
7
|
-
height={8}
|
|
8
|
-
border
|
|
9
|
-
gap={1}
|
|
10
|
-
>
|
|
11
|
-
{'This is bordered text with:\n\n - multiple lines,\n - food for thought, and\n - some formatting.'}
|
|
12
|
-
</Text>
|
|
13
|
-
<Text
|
|
14
|
-
width={36}
|
|
15
|
-
height={7}
|
|
16
|
-
border
|
|
17
|
-
gap={1}
|
|
18
|
-
>
|
|
19
|
-
This is a long text that should wrap automatically when width and height are specified and the content exceeds the available space.
|
|
20
|
-
</Text>
|
|
21
|
-
|
|
22
|
-
<Text>Simple Text.</Text>
|
|
23
|
-
</Box>
|
|
24
|
-
);
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Text, State, TextInput, HR, Box } from 'asciitorium';
|
|
2
|
-
|
|
3
|
-
export const TextInputExample = () => {
|
|
4
|
-
// States for text input components - local to each component instance
|
|
5
|
-
const textInputValue = new State('Hello World');
|
|
6
|
-
|
|
7
|
-
return (
|
|
8
|
-
<Box width={42} height={28} label="TextInput Example:" border>
|
|
9
|
-
<TextInput
|
|
10
|
-
gap={{ top: 2 }}
|
|
11
|
-
width={20}
|
|
12
|
-
align="center"
|
|
13
|
-
value={textInputValue}
|
|
14
|
-
placeholder="Enter text here..."
|
|
15
|
-
/>
|
|
16
|
-
<Text width={20} align="center" height={3} gap={{ left: 5, bottom: 4 }}>
|
|
17
|
-
{textInputValue}
|
|
18
|
-
</Text>
|
|
19
|
-
|
|
20
|
-
<Text align="center" width={30} height={3}>
|
|
21
|
-
Use arrow keys to move cursor. Numeric input restricts to numbers only.
|
|
22
|
-
</Text>
|
|
23
|
-
</Box>
|
|
24
|
-
);
|
|
25
|
-
};
|