Mark Sinclair
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import * as React from 'react';
|
|
import { Box, Container, Grid, Typography } from '@mui/material';
|
|
import { NymLogo, Playground } from '@nymproject/react';
|
|
import { NymThemeProvider } from '@nymproject/mui-theme';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
import { AppContextProvider, useAppContext } from './context';
|
|
|
|
export const AppTheme: React.FC = ({ children }) => {
|
|
const { mode } = useAppContext();
|
|
|
|
return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
|
|
};
|
|
|
|
export const Content: React.FC = () => {
|
|
const { mode } = useAppContext();
|
|
const theme = useTheme();
|
|
|
|
const swatches: Record<string, string> = {
|
|
'palette.primary.main': theme.palette.primary.main,
|
|
'palette.secondary.main': theme.palette.secondary.main,
|
|
'palette.info.main': theme.palette.info.main,
|
|
'palette.success.main': theme.palette.success.main,
|
|
'palette.text.primary': theme.palette.text.primary,
|
|
'theme.palette.nym.networkExplorer.mixnodes.status.active':
|
|
theme.palette.nym.networkExplorer.mixnodes.status.active,
|
|
'theme.palette.nym.networkExplorer.mixnodes.status.standby':
|
|
theme.palette.nym.networkExplorer.mixnodes.status.standby,
|
|
};
|
|
|
|
return (
|
|
<Container sx={{ py: 4 }}>
|
|
<Box display="flex" flexDirection="row-reverse" pb={2}>
|
|
<ThemeToggle />
|
|
</Box>
|
|
<NymLogo height={50} />
|
|
<h1>Example App</h1>
|
|
<Box mb={10}>
|
|
<Typography sx={{ color: ({ palette }) => palette.nym.networkExplorer.mixnodes.status.active }}>
|
|
This is an example app that uses React, Typescript, Webpack and the Nym theme + components.
|
|
</Typography>
|
|
<h4>Some colours from the theme (mode = {mode}) are:</h4>
|
|
<Grid container spacing={2}>
|
|
{Object.keys(swatches).map((key) => (
|
|
<Grid item key={key}>
|
|
<Box display="flex" alignItems="center">
|
|
<svg height="50px" width="50px">
|
|
<rect width="100%" height="100%" fill={swatches[key]} />
|
|
</svg>
|
|
<Typography mx={2}>
|
|
<code>{swatches[key]}</code>
|
|
<br />
|
|
<code>{key}</code>
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
<h1>Component playground</h1>
|
|
<Playground />
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export const App: React.FC = () => (
|
|
<AppContextProvider>
|
|
<AppTheme>
|
|
<Content />
|
|
</AppTheme>
|
|
</AppContextProvider>
|
|
);
|