com: Add json formatting to the packages

Core447 · Jan 28, 2025 · e0dbc69 · e0dbc69
1 parent 9b34fd3
commit e0dbc69
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "peerjs": "^1.5.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-json-pretty": "^2.2.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "unique-names-generator": "^4.7.1"

diff --git a/src/app/com/page.tsx b/src/app/com/page.tsx
@@ -4,6 +4,10 @@ import { DataConnection, Peer } from "peerjs";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import { adjectives, animals, colors, uniqueNamesGenerator } from "unique-names-generator";
 import { useQuery } from "@tanstack/react-query";
+import JSONPretty from 'react-json-pretty';
+import 'react-json-pretty/themes/monikai.css';
+
+
 
 interface Data {
 }
@@ -199,7 +203,9 @@ export default function Page() {
                     {receivedPackages.slice(-5).map((packet, index) => (
                         <div key={index} className="p-2 border rounded mb-2">
                             <p>From: {packet.sender}</p>
-                            <p>Message: {JSON.stringify(packet)}</p>
+                            {/* <p>Message: {JSON.stringify(packet)}</p> */}
+                            <JSONPretty id="json-pretty" data={packet}></JSONPretty>
+
                         </div>
                     ))}
                 </div>