Gui scafolding toolbar, log console, axis for sketching

This commit is contained in:
Kurt Hutten IrevDev
2022-11-27 14:06:33 +11:00
parent 022788b2a3
commit 6f24e75f92
6 changed files with 284 additions and 41 deletions

34
src/components/Logs.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useEffect } from 'react'
import { useStore } from '../useStore'
export const Logs = () => {
const { logs, resetLogs } = useStore(({ logs, resetLogs }) => ({
logs,
resetLogs,
}))
useEffect(() => {
const element = document.querySelector('.console-tile')
if (element) {
element.scrollTop = element.scrollHeight - element.clientHeight
}
}, [logs])
return (
<div className="h-full relative">
<div className="absolute inset-0 flex flex-col items-start">
<button onClick={resetLogs}>reset</button>
<div className=" overflow-auto h-full console-tile w-full">
{logs.map((msg, index) => {
return (
<pre className="text-xs pl-2 text-sky-600" key={index}>
<code style={{ fontFamily: 'monospace' }} key={index}>
<span className="text-gray-400">{'- '}</span>
{String(msg)}
</code>
</pre>
)
})}
</div>
</div>
</div>
)
}