mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-28 02:50:45 +00:00
Implement highlighter and style it
This commit is contained in:
parent
8175c60394
commit
6a821742be
@ -0,0 +1,28 @@
|
|||||||
|
import { YStack } from 'tamagui'
|
||||||
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
|
||||||
|
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||||
|
type SyntaxHighlighterBoxProps = {
|
||||||
|
rows: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const customStyle = {
|
||||||
|
...solarizedlight,
|
||||||
|
'pre[class*="language-"]': {
|
||||||
|
...solarizedlight['pre[class*="language-"]'],
|
||||||
|
backgroundColor: 'white',
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const SyntaxHighlighterBox = ({ rows }: SyntaxHighlighterBoxProps) => {
|
||||||
|
return (
|
||||||
|
<YStack style={{ borderRadius: '15px' }}>
|
||||||
|
<SyntaxHighlighter
|
||||||
|
language="bash"
|
||||||
|
style={customStyle}
|
||||||
|
showLineNumbers={true}
|
||||||
|
>
|
||||||
|
{`${rows.join('\n')}`}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
</YStack>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default SyntaxHighlighterBox
|
@ -2,6 +2,7 @@ import { XStack, Stack, YStack } from 'tamagui'
|
|||||||
import { InformationBox, Text } from '@status-im/components'
|
import { InformationBox, Text } from '@status-im/components'
|
||||||
import { CloseCircleIcon } from '@status-im/icons'
|
import { CloseCircleIcon } from '@status-im/icons'
|
||||||
import OsCard from './OsCard'
|
import OsCard from './OsCard'
|
||||||
|
import SyntaxHighlighterBox from './SyntaxHighlighter'
|
||||||
|
|
||||||
const ValidatorSetupInstall = () => {
|
const ValidatorSetupInstall = () => {
|
||||||
return (
|
return (
|
||||||
@ -52,11 +53,14 @@ const ValidatorSetupInstall = () => {
|
|||||||
</Text>
|
</Text>
|
||||||
</YStack>
|
</YStack>
|
||||||
{/* Cards */}
|
{/* Cards */}
|
||||||
<XStack justifyContent={'space-between'} space={'$3'}>
|
<XStack justifyContent={'space-between'} space={'$3'} margin={'50px 0px'}>
|
||||||
<OsCard icon="/icons/MAC.png" name="Mac" isSelected={true}></OsCard>
|
<OsCard icon="/icons/MAC.png" name="Mac" isSelected={true}></OsCard>
|
||||||
<OsCard icon="/icons/Linux.png" name="Linux"></OsCard>
|
<OsCard icon="/icons/Linux.png" name="Linux"></OsCard>
|
||||||
<OsCard icon="/icons/windows.png" name="Windows"></OsCard>
|
<OsCard icon="/icons/windows.png" name="Windows"></OsCard>
|
||||||
</XStack>
|
</XStack>
|
||||||
|
<SyntaxHighlighterBox
|
||||||
|
rows={['brew tap ethereum/ethereum', 'brew install ethereum']}
|
||||||
|
></SyntaxHighlighterBox>
|
||||||
</YStack>
|
</YStack>
|
||||||
</Stack>
|
</Stack>
|
||||||
</YStack>
|
</YStack>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user