-
Notifications
You must be signed in to change notification settings - Fork 2k
/
YamlList.tsx
55 lines (53 loc) · 1.64 KB
/
YamlList.tsx
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
import type { YamlItemType } from '@/types';
import { Box, Flex, Grid } from '@chakra-ui/react';
import { useState } from 'react';
import { YamlCode } from '@sealos/ui';
const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
const [selectedIndex, setSelectedIndex] = useState(0);
return (
<Flex
flexGrow={1}
// h="0"
mt={'12px'}
alignItems={'start'}
zIndex={1}
position={'relative'}
overflow={'scroll'}>
<Box flexShrink={0} mt={3} borderRadius={'sm'} overflow={'hidden'} bg={'white'}>
{yamlList.map((file, index) => (
<Box
key={file.filename}
px={5}
py={3}
cursor={'pointer'}
borderLeft={'2px solid'}
alignItems={'center'}
h={'48px'}
_hover={{
backgroundColor: 'myWhite.400'
}}
{...(index === selectedIndex
? {
fontWeight: 'bold',
borderColor: 'myGray.900',
backgroundColor: 'myWhite.600 !important'
}
: {
color: 'myGray.500',
borderColor: 'myGray.200',
backgroundColor: 'transparent'
})}
onClick={() => setSelectedIndex(index)}>
{file.filename.replace(/-.*/, '')}
</Box>
))}
</Box>
{!!yamlList[selectedIndex] && (
<Grid w="0" h="full" flex={'auto'} overflow={'auto'}>
<YamlCode markdown={{ children: yamlList[selectedIndex].value }}></YamlCode>
</Grid>
)}
</Flex>
);
};
export default YamlList;