change logs aswell (#21)

* kurt-19-change-logs-aswell

* fix tests

src/components/Logs.tsx

@@ -1,7 +1,10 @@
+import ReactJson from 'react-json-view'
 import { useEffect } from 'react'
 import { useStore } from '../useStore'
 import { PanelHeader } from './PanelHeader'
 
+const ReactJsonTypeHack = ReactJson as any
+
 export const Logs = () => {
   const { logs, resetLogs } = useStore(({ logs, resetLogs }) => ({
     logs,
@@ -18,19 +21,16 @@ export const Logs = () => {
       <PanelHeader title="Logs" />
       <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>
+          <ReactJsonTypeHack
+            src={logs}
+            collapsed={1}
+            collapseStringsAfterLength={60}
+            enableClipboard={false}
+            displayArrayKey={false}
+            displayDataTypes={false}
+            displayObjectSize={true}
+            name={false}
+          />
         </div>
       </div>
     </div>