forked from mirrors/thatmattlove-hyperglass
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Box } from '@chakra-ui/react';
|
|
import { useConfig } from '~/context';
|
|
import { useColorValue } from '~/hooks';
|
|
import { Highlighted } from './highlighted';
|
|
|
|
import type { BoxProps } from '@chakra-ui/react';
|
|
|
|
type TextOutputProps = Swap<BoxProps, 'children', string>;
|
|
|
|
export const TextOutput = (props: TextOutputProps): JSX.Element => {
|
|
const { children, ...rest } = props;
|
|
|
|
const bg = useColorValue('blackAlpha.100', 'gray.800');
|
|
const color = useColorValue('black', 'white');
|
|
const selectionBg = useColorValue('black', 'white');
|
|
const selectionColor = useColorValue('white', 'black');
|
|
|
|
const {
|
|
web: { highlight },
|
|
} = useConfig();
|
|
|
|
return (
|
|
<Box
|
|
p={3}
|
|
mt={5}
|
|
mx={2}
|
|
bg={bg}
|
|
as="pre"
|
|
border="1px"
|
|
rounded="md"
|
|
color={color}
|
|
fontSize="sm"
|
|
fontFamily="mono"
|
|
borderColor="inherit"
|
|
whiteSpace="pre-wrap"
|
|
css={{
|
|
'&::selection': {
|
|
backgroundColor: selectionBg,
|
|
color: selectionColor,
|
|
},
|
|
}}
|
|
{...rest}
|
|
>
|
|
<Highlighted patterns={highlight}>
|
|
{children.split('\\n').join('\n').replace(/\n\n/g, '\n')}
|
|
</Highlighted>
|
|
</Box>
|
|
);
|
|
};
|