@astryxdesign/cli 0.1.0-canary.f94dd07 → 0.1.0
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/docs/getting-started.doc.mjs +11 -11
- package/docs/styling.doc.mjs +2 -1
- package/package.json +7 -7
- package/src/api/doctor.mjs +3 -3
- package/src/commands/agent-docs.mjs +10 -27
- package/src/commands/agent-docs.test.mjs +21 -21
- package/src/commands/init.mjs +1 -1
- package/src/utils/package-manager.mjs +1 -1
- package/templates/pages/documentation/page.tsx +52 -39
- package/templates/pages/documentation-design/page.tsx +55 -80
- package/templates/pages/documentation-technical/page.tsx +59 -101
- package/templates/pages/ide/page.tsx +236 -167
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
|
|
5
5
|
import {useState, useMemo} from 'react';
|
|
6
6
|
import * as stylex from '@stylexjs/stylex';
|
|
7
|
+
import {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';
|
|
7
8
|
|
|
8
9
|
import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
|
|
9
10
|
import {ResizeHandle, useResizable} from '@astryxdesign/core/Resizable';
|
|
10
11
|
import {Text, Heading} from '@astryxdesign/core/Text';
|
|
11
12
|
import {CodeBlock} from '@astryxdesign/core/CodeBlock';
|
|
12
13
|
import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
|
|
13
|
-
import {Stack
|
|
14
|
-
import {useMediaQuery} from '@astryxdesign/core/hooks';
|
|
14
|
+
import {Stack} from '@astryxdesign/core/Layout';
|
|
15
15
|
import {TabList, Tab} from '@astryxdesign/core/TabList';
|
|
16
16
|
import {
|
|
17
17
|
SegmentedControl,
|
|
@@ -27,14 +27,29 @@ import type {TreeListItemData} from '@astryxdesign/core/TreeList';
|
|
|
27
27
|
import {
|
|
28
28
|
FolderIcon,
|
|
29
29
|
DocumentTextIcon,
|
|
30
|
+
CodeBracketIcon,
|
|
30
31
|
MagnifyingGlassIcon,
|
|
32
|
+
CommandLineIcon,
|
|
33
|
+
ExclamationTriangleIcon,
|
|
34
|
+
InformationCircleIcon,
|
|
35
|
+
BugAntIcon,
|
|
36
|
+
HomeIcon,
|
|
37
|
+
FolderOpenIcon,
|
|
38
|
+
PuzzlePieceIcon,
|
|
31
39
|
} from '@heroicons/react/24/outline';
|
|
40
|
+
import {
|
|
41
|
+
HomeIcon as HomeIconSolid,
|
|
42
|
+
FolderOpenIcon as FolderOpenSolid,
|
|
43
|
+
MagnifyingGlassIcon as MagnifyingGlassSolid,
|
|
44
|
+
PuzzlePieceIcon as PuzzlePieceSolid,
|
|
45
|
+
} from '@heroicons/react/24/solid';
|
|
32
46
|
|
|
33
47
|
const styles = stylex.create({
|
|
34
48
|
contentFill: {
|
|
35
49
|
height: '100%',
|
|
36
50
|
},
|
|
37
51
|
terminalWrapper: {
|
|
52
|
+
flex: 1,
|
|
38
53
|
minHeight: 0,
|
|
39
54
|
overflow: 'hidden',
|
|
40
55
|
display: 'grid',
|
|
@@ -54,27 +69,28 @@ const styles = stylex.create({
|
|
|
54
69
|
flexShrink: 0,
|
|
55
70
|
},
|
|
56
71
|
editorArea: {
|
|
72
|
+
flex: 1,
|
|
57
73
|
overflow: 'auto',
|
|
58
|
-
minHeight: 0,
|
|
59
74
|
},
|
|
60
75
|
fileExplorer: {
|
|
61
76
|
padding: 16,
|
|
62
|
-
minWidth: 0,
|
|
63
|
-
},
|
|
64
|
-
propertiesPanel: {
|
|
65
|
-
height: '100%',
|
|
66
|
-
},
|
|
67
|
-
propertiesContent: {
|
|
68
|
-
flex: 1,
|
|
69
|
-
minHeight: 0,
|
|
70
|
-
},
|
|
71
|
-
propertyActions: {
|
|
72
|
-
marginTop: 'auto',
|
|
73
77
|
},
|
|
74
78
|
terminalArea: {
|
|
75
79
|
height: '100%',
|
|
76
80
|
overflow: 'hidden',
|
|
77
81
|
},
|
|
82
|
+
hideOnMobile: {
|
|
83
|
+
display: {
|
|
84
|
+
default: 'contents',
|
|
85
|
+
'@media (max-width: 768px)': 'none',
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
hideSideNav: {
|
|
89
|
+
display: {
|
|
90
|
+
default: 'flex',
|
|
91
|
+
'@media (max-width: 768px)': 'none',
|
|
92
|
+
},
|
|
93
|
+
},
|
|
78
94
|
});
|
|
79
95
|
|
|
80
96
|
const EDITOR_CODE = `import {useState, useCallback} from 'react';
|
|
@@ -135,23 +151,22 @@ $ `;
|
|
|
135
151
|
function buildFileTree(
|
|
136
152
|
onFileClick: (name: string) => void,
|
|
137
153
|
): TreeListItemData[] {
|
|
138
|
-
const label = (text: string) => <Text maxLines={1}>{text}</Text>;
|
|
139
154
|
const file = (id: string): TreeListItemData => ({
|
|
140
155
|
id,
|
|
141
|
-
label:
|
|
156
|
+
label: id,
|
|
142
157
|
startContent: <Icon icon={DocumentTextIcon} size="xsm" />,
|
|
143
158
|
onClick: () => onFileClick(id),
|
|
144
159
|
});
|
|
145
160
|
return [
|
|
146
161
|
{
|
|
147
162
|
id: 'src',
|
|
148
|
-
label:
|
|
163
|
+
label: 'src',
|
|
149
164
|
startContent: <Icon icon={FolderIcon} size="xsm" />,
|
|
150
165
|
isExpanded: true,
|
|
151
166
|
children: [
|
|
152
167
|
{
|
|
153
168
|
id: 'components',
|
|
154
|
-
label:
|
|
169
|
+
label: 'components',
|
|
155
170
|
startContent: <Icon icon={FolderIcon} size="xsm" />,
|
|
156
171
|
isExpanded: true,
|
|
157
172
|
children: [
|
|
@@ -162,14 +177,14 @@ function buildFileTree(
|
|
|
162
177
|
},
|
|
163
178
|
{
|
|
164
179
|
id: 'pages',
|
|
165
|
-
label:
|
|
180
|
+
label: 'pages',
|
|
166
181
|
startContent: <Icon icon={FolderIcon} size="xsm" />,
|
|
167
182
|
isExpanded: true,
|
|
168
183
|
children: [file('index.tsx'), file('about.tsx')],
|
|
169
184
|
},
|
|
170
185
|
{
|
|
171
186
|
id: 'styles',
|
|
172
|
-
label:
|
|
187
|
+
label: 'styles',
|
|
173
188
|
startContent: <Icon icon={FolderIcon} size="xsm" />,
|
|
174
189
|
isExpanded: true,
|
|
175
190
|
children: [file('tokens.stylex.ts'), file('theme.ts')],
|
|
@@ -201,6 +216,7 @@ const HISTORY_ITEMS = [
|
|
|
201
216
|
|
|
202
217
|
export default function ResizableWorkspacePage() {
|
|
203
218
|
const [activeFile, setActiveFile] = useState('Counter.tsx');
|
|
219
|
+
const [activeNavItem, setActiveNavItem] = useState('Explorer');
|
|
204
220
|
const [activeTermTab, setActiveTermTab] = useState('terminal');
|
|
205
221
|
const [activePropertiesTab, setActivePropertiesTab] = useState('properties');
|
|
206
222
|
const fileTree = useMemo(() => buildFileTree(setActiveFile), []);
|
|
@@ -229,48 +245,89 @@ export default function ResizableWorkspacePage() {
|
|
|
229
245
|
collapsedSize: 40,
|
|
230
246
|
});
|
|
231
247
|
|
|
232
|
-
const isMobile = useMediaQuery('(max-width: 768px)');
|
|
233
|
-
|
|
234
248
|
return (
|
|
235
249
|
<Layout
|
|
236
250
|
height="fill"
|
|
251
|
+
start={
|
|
252
|
+
<LayoutPanel hasDivider={false} padding={0}>
|
|
253
|
+
<SideNav
|
|
254
|
+
collapsible={{defaultIsCollapsed: true}}
|
|
255
|
+
resizable
|
|
256
|
+
xstyle={styles.hideSideNav}>
|
|
257
|
+
<SideNavSection title="Navigation" isHeaderHidden>
|
|
258
|
+
<SideNavItem
|
|
259
|
+
label="Home"
|
|
260
|
+
icon={HomeIcon}
|
|
261
|
+
selectedIcon={HomeIconSolid}
|
|
262
|
+
isSelected={activeNavItem === 'Home'}
|
|
263
|
+
onClick={() => setActiveNavItem('Home')}
|
|
264
|
+
/>
|
|
265
|
+
<SideNavItem
|
|
266
|
+
label="Explorer"
|
|
267
|
+
icon={FolderOpenIcon}
|
|
268
|
+
selectedIcon={FolderOpenSolid}
|
|
269
|
+
isSelected={activeNavItem === 'Explorer'}
|
|
270
|
+
onClick={() => setActiveNavItem('Explorer')}
|
|
271
|
+
/>
|
|
272
|
+
<SideNavItem
|
|
273
|
+
label="Search"
|
|
274
|
+
icon={MagnifyingGlassIcon}
|
|
275
|
+
selectedIcon={MagnifyingGlassSolid}
|
|
276
|
+
isSelected={activeNavItem === 'Search'}
|
|
277
|
+
onClick={() => setActiveNavItem('Search')}
|
|
278
|
+
/>
|
|
279
|
+
<SideNavItem
|
|
280
|
+
label="Source Control"
|
|
281
|
+
icon={CodeBracketIcon}
|
|
282
|
+
isSelected={activeNavItem === 'Source Control'}
|
|
283
|
+
onClick={() => setActiveNavItem('Source Control')}
|
|
284
|
+
/>
|
|
285
|
+
<SideNavItem
|
|
286
|
+
label="Extensions"
|
|
287
|
+
icon={PuzzlePieceIcon}
|
|
288
|
+
selectedIcon={PuzzlePieceSolid}
|
|
289
|
+
isSelected={activeNavItem === 'Extensions'}
|
|
290
|
+
onClick={() => setActiveNavItem('Extensions')}
|
|
291
|
+
/>
|
|
292
|
+
</SideNavSection>
|
|
293
|
+
</SideNav>
|
|
294
|
+
</LayoutPanel>
|
|
295
|
+
}
|
|
237
296
|
content={
|
|
238
297
|
<LayoutContent padding={0}>
|
|
239
298
|
<Layout
|
|
240
299
|
height="fill"
|
|
241
300
|
start={
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
</>
|
|
273
|
-
)
|
|
301
|
+
<div {...stylex.props(styles.hideOnMobile)}>
|
|
302
|
+
{!startPanel.isCollapsed && (
|
|
303
|
+
<LayoutPanel
|
|
304
|
+
width={startPanel.size}
|
|
305
|
+
hasDivider={false}
|
|
306
|
+
padding={0}>
|
|
307
|
+
<Stack
|
|
308
|
+
direction="vertical"
|
|
309
|
+
xstyle={styles.fileExplorer}
|
|
310
|
+
gap={2}>
|
|
311
|
+
<TextInput
|
|
312
|
+
label="Search files"
|
|
313
|
+
isLabelHidden
|
|
314
|
+
value=""
|
|
315
|
+
placeholder="Search"
|
|
316
|
+
size="md"
|
|
317
|
+
startIcon={MagnifyingGlassIcon}
|
|
318
|
+
/>
|
|
319
|
+
<TreeList items={fileTree} density="compact" />
|
|
320
|
+
</Stack>
|
|
321
|
+
</LayoutPanel>
|
|
322
|
+
)}
|
|
323
|
+
<ResizeHandle
|
|
324
|
+
direction="horizontal"
|
|
325
|
+
hasDivider
|
|
326
|
+
isAlwaysVisible={false}
|
|
327
|
+
resizable={startPanel.props}
|
|
328
|
+
label="Resize file explorer"
|
|
329
|
+
/>
|
|
330
|
+
</div>
|
|
274
331
|
}
|
|
275
332
|
content={
|
|
276
333
|
<LayoutContent padding={0}>
|
|
@@ -278,13 +335,13 @@ export default function ResizableWorkspacePage() {
|
|
|
278
335
|
height="fill"
|
|
279
336
|
content={
|
|
280
337
|
<LayoutContent padding={0}>
|
|
281
|
-
<Stack
|
|
282
|
-
|
|
338
|
+
<Stack
|
|
339
|
+
direction="vertical"
|
|
340
|
+
xstyle={styles.contentFill}>
|
|
341
|
+
<div {...stylex.props(styles.editorArea)}>
|
|
283
342
|
<CodeBlock
|
|
284
343
|
code={EDITOR_CODE}
|
|
285
344
|
language="typescript"
|
|
286
|
-
container="section"
|
|
287
|
-
hasLanguageLabel={false}
|
|
288
345
|
hasLineNumbers
|
|
289
346
|
highlightLines={[21]}
|
|
290
347
|
hasCopyButton={false}
|
|
@@ -296,7 +353,7 @@ export default function ResizableWorkspacePage() {
|
|
|
296
353
|
borderRadius: 0,
|
|
297
354
|
}}
|
|
298
355
|
/>
|
|
299
|
-
</
|
|
356
|
+
</div>
|
|
300
357
|
<ResizeHandle
|
|
301
358
|
direction="vertical"
|
|
302
359
|
hasDivider
|
|
@@ -321,19 +378,43 @@ export default function ResizableWorkspacePage() {
|
|
|
321
378
|
size="sm"
|
|
322
379
|
hasDivider={false}
|
|
323
380
|
xstyle={styles.tabListPadding}>
|
|
324
|
-
<Tab
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
381
|
+
<Tab
|
|
382
|
+
label="Terminal"
|
|
383
|
+
value="terminal"
|
|
384
|
+
icon={
|
|
385
|
+
<Icon icon={CommandLineIcon} size="sm" />
|
|
386
|
+
}
|
|
387
|
+
/>
|
|
388
|
+
<Tab
|
|
389
|
+
label="Problems"
|
|
390
|
+
value="problems"
|
|
391
|
+
icon={
|
|
392
|
+
<Icon
|
|
393
|
+
icon={ExclamationTriangleIcon}
|
|
394
|
+
size="sm"
|
|
395
|
+
/>
|
|
396
|
+
}
|
|
397
|
+
/>
|
|
398
|
+
<Tab
|
|
399
|
+
label="Output"
|
|
400
|
+
value="output"
|
|
401
|
+
icon={
|
|
402
|
+
<Icon
|
|
403
|
+
icon={InformationCircleIcon}
|
|
404
|
+
size="sm"
|
|
405
|
+
/>
|
|
406
|
+
}
|
|
407
|
+
/>
|
|
408
|
+
<Tab
|
|
409
|
+
label="Debug"
|
|
410
|
+
value="debug"
|
|
411
|
+
icon={<Icon icon={BugAntIcon} size="sm" />}
|
|
412
|
+
/>
|
|
328
413
|
</TabList>
|
|
329
|
-
<
|
|
330
|
-
size="fill"
|
|
331
|
-
xstyle={styles.terminalWrapper}>
|
|
414
|
+
<div {...stylex.props(styles.terminalWrapper)}>
|
|
332
415
|
<CodeBlock
|
|
333
416
|
code={TERMINAL_OUTPUT}
|
|
334
417
|
language="bash"
|
|
335
|
-
container="section"
|
|
336
|
-
hasLanguageLabel={false}
|
|
337
418
|
hasCopyButton={false}
|
|
338
419
|
size="sm"
|
|
339
420
|
style={{
|
|
@@ -343,7 +424,7 @@ export default function ResizableWorkspacePage() {
|
|
|
343
424
|
borderRadius: 0,
|
|
344
425
|
}}
|
|
345
426
|
/>
|
|
346
|
-
</
|
|
427
|
+
</div>
|
|
347
428
|
</Stack>
|
|
348
429
|
</div>
|
|
349
430
|
)}
|
|
@@ -351,118 +432,106 @@ export default function ResizableWorkspacePage() {
|
|
|
351
432
|
</LayoutContent>
|
|
352
433
|
}
|
|
353
434
|
end={
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
<
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
<
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<MetadataListItem
|
|
407
|
-
key={prop.label}
|
|
408
|
-
label={prop.label}>
|
|
409
|
-
{prop.value}
|
|
410
|
-
</MetadataListItem>
|
|
411
|
-
))}
|
|
412
|
-
</MetadataList>
|
|
413
|
-
<Stack
|
|
414
|
-
direction="vertical"
|
|
415
|
-
gap={2}
|
|
416
|
-
xstyle={styles.propertyActions}>
|
|
435
|
+
<div {...stylex.props(styles.hideOnMobile)}>
|
|
436
|
+
<ResizeHandle
|
|
437
|
+
direction="horizontal"
|
|
438
|
+
hasDivider
|
|
439
|
+
isReversed
|
|
440
|
+
isAlwaysVisible={false}
|
|
441
|
+
resizable={endPanel.props}
|
|
442
|
+
label="Resize properties panel"
|
|
443
|
+
/>
|
|
444
|
+
{!endPanel.isCollapsed && (
|
|
445
|
+
<LayoutPanel
|
|
446
|
+
width={endPanel.size}
|
|
447
|
+
hasDivider={false}
|
|
448
|
+
padding={4}>
|
|
449
|
+
<Stack direction="vertical" gap={3}>
|
|
450
|
+
<SegmentedControl
|
|
451
|
+
label="Properties panel sections"
|
|
452
|
+
value={activePropertiesTab}
|
|
453
|
+
onChange={setActivePropertiesTab}
|
|
454
|
+
size="sm"
|
|
455
|
+
layout="fill">
|
|
456
|
+
<SegmentedControlItem
|
|
457
|
+
label="Properties"
|
|
458
|
+
value="properties"
|
|
459
|
+
/>
|
|
460
|
+
<SegmentedControlItem
|
|
461
|
+
label="History"
|
|
462
|
+
value="history"
|
|
463
|
+
/>
|
|
464
|
+
</SegmentedControl>
|
|
465
|
+
{activePropertiesTab === 'properties' ? (
|
|
466
|
+
<>
|
|
467
|
+
<Stack direction="vertical" gap={1}>
|
|
468
|
+
<Heading level={3}>
|
|
469
|
+
{activeFile}
|
|
470
|
+
</Heading>
|
|
471
|
+
<Text color="secondary" type="supporting">
|
|
472
|
+
src/components/{activeFile}
|
|
473
|
+
</Text>
|
|
474
|
+
</Stack>
|
|
475
|
+
<MetadataList
|
|
476
|
+
xstyle={styles.metadataCompact}>
|
|
477
|
+
{PROPERTIES.map(prop => (
|
|
478
|
+
<MetadataListItem
|
|
479
|
+
key={prop.label}
|
|
480
|
+
label={prop.label}>
|
|
481
|
+
{prop.value}
|
|
482
|
+
</MetadataListItem>
|
|
483
|
+
))}
|
|
484
|
+
</MetadataList>
|
|
485
|
+
<Stack direction="vertical" gap={2}>
|
|
486
|
+
<Stack direction="vertical" gap={2}>
|
|
417
487
|
<Button
|
|
418
488
|
label="Format Document"
|
|
419
|
-
size="
|
|
489
|
+
size="md"
|
|
420
490
|
variant="secondary"
|
|
421
491
|
/>
|
|
422
492
|
<Button
|
|
423
493
|
label="Go to Definition"
|
|
424
|
-
size="
|
|
494
|
+
size="md"
|
|
425
495
|
variant="secondary"
|
|
426
496
|
/>
|
|
427
497
|
<Button
|
|
428
498
|
label="Find References"
|
|
429
|
-
size="
|
|
499
|
+
size="md"
|
|
430
500
|
variant="secondary"
|
|
431
501
|
/>
|
|
432
502
|
</Stack>
|
|
433
503
|
</Stack>
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
)
|
|
504
|
+
</>
|
|
505
|
+
) : (
|
|
506
|
+
<Stack direction="vertical" gap={1}>
|
|
507
|
+
<List>
|
|
508
|
+
{HISTORY_ITEMS.map(item => (
|
|
509
|
+
<ListItem
|
|
510
|
+
key={item.label}
|
|
511
|
+
label={item.label}
|
|
512
|
+
endContent={
|
|
513
|
+
<Text
|
|
514
|
+
type="supporting"
|
|
515
|
+
color="secondary">
|
|
516
|
+
{item.time}
|
|
517
|
+
</Text>
|
|
518
|
+
}
|
|
519
|
+
startContent={
|
|
520
|
+
<span
|
|
521
|
+
{...stylex.props(
|
|
522
|
+
styles.historyTimelineDot,
|
|
523
|
+
)}
|
|
524
|
+
/>
|
|
525
|
+
}
|
|
526
|
+
/>
|
|
527
|
+
))}
|
|
528
|
+
</List>
|
|
529
|
+
</Stack>
|
|
530
|
+
)}
|
|
531
|
+
</Stack>
|
|
532
|
+
</LayoutPanel>
|
|
533
|
+
)}
|
|
534
|
+
</div>
|
|
466
535
|
}
|
|
467
536
|
/>
|
|
468
537
|
</LayoutContent>
|