forked from defunkt/toes
38 lines
881 B
TypeScript
38 lines
881 B
TypeScript
import { define } from '@because/forge'
|
|
import { theme } from '../themes'
|
|
|
|
export const LogsContainer = define('LogsContainer', {
|
|
background: theme('colors-bgSubtle'),
|
|
borderRadius: theme('radius-md'),
|
|
padding: 12,
|
|
fontFamily: theme('fonts-mono'),
|
|
fontSize: 12,
|
|
color: theme('colors-textMuted'),
|
|
maxHeight: 200,
|
|
overflow: 'auto',
|
|
variants: {
|
|
narrow: {
|
|
padding: 8,
|
|
},
|
|
},
|
|
|
|
render({ props: { children, id }, parts: { Root } }) {
|
|
return <Root id={id} ref={(el: HTMLElement | null) => {
|
|
if (el) requestAnimationFrame(() => el.scrollTop = el.scrollHeight)
|
|
}}>{children}</Root>
|
|
}
|
|
})
|
|
|
|
export const LogLine = define('LogLine', {
|
|
marginBottom: 4,
|
|
selectors: {
|
|
'&:last-child': { marginBottom: 0 },
|
|
},
|
|
})
|
|
|
|
export const LogTime = define('LogTime', {
|
|
color: theme('colors-textFaintest'),
|
|
marginRight: 12,
|
|
display: 'inline',
|
|
})
|