Published
Edited
Oct 23, 2020
1 fork
Importers
2 stars
Program = () => {
const { List, ListItem, Divider } = react95
return htm`
<${WinContainer}>
<${List}>
<${ListItem} size="sm">View</>
<${Divider} />
<${ListItem} size="sm">Paste</>
<${ListItem} size="sm">Paste Shortcut</>
<${ListItem} size="sm">Undo Copy</>
<${Divider} />
<${ListItem} size="sm">Properties</>
</${List}>
</${WinContainer}>
`
}
WinContainer = ({ children, theme = react95_theme, ...otherProps }) => {
const { createGlobalStyle, ThemeProvider } = styled
const { styleReset } = react95
//const GlobalStyle = createGlobalStyle`
// ${styleReset};
//`
return htm`
<${WinStyleContainer} backgroundColor=${theme.backgroundColor} ...${otherProps}>
<${ThemeProvider} theme=${theme}>
${children}
</${ThemeProvider}>
</${WinStyleContainer}>
`
}
WinStyleContainer = styled.div`
${winFontFaces};
font-family: 'MS Sans Serif', sans-serif;
background: ${props => props.backgroundColor} none repeat scroll 0% 0%;
padding: 2rem;
& {
hr { padding: unset; }
}
`
winFontFaces = styled.css`
@font-face {
font-family: 'MS Sans Serif';
src: url('${react95_font_normal_url}') format('woff2');
font-weight: normal; /* 400 */
font-style: normal;
}
@font-face {
font-family: 'MS Sans Serif';
src: url('${react95_font_bold_url}') format('woff2');
font-weight: bold; /* 700 */
font-style: normal;
}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
