chore: added many complex data

demo/src/app.jsx

@@ -1,19 +1,7 @@
 import search from 'string-hunt'
 import { useEffect, useState } from 'preact/hooks'
 import FormatJson from './components/jsonFormatter'
-
-const data = [
-  {
-    name: "John doe",
-    date: "10/10/2020",
-    age: 12
-  },
-  {
-    name: "Ivan doe",
-    date: "10/10/2020",
-    age: 14
-  },
-]
+import data from './utils/data'
 
 export function App() {
   const [query, setQuery] = useState("")

demo/src/components/jsonFormatter.jsx

@@ -12,7 +12,7 @@ export default function FormatJson({ json, title }) {
 
     }
 
-    return <div className="p-10 bg-neutral-700 bg-opacity-30 ">
+    return <div className="p-10 bg-neutral-700 bg-opacity-30 h-[60vh] overflow-auto">
         <h1 className="text-3xl text-white font-semibold">{ title }</h1>
         <hr  className="my-4 opacity-10"/>
         <JsonFormatter json={json} tabWith={4} jsonStyle={jsonStyle} />

demo/src/index.css

@@ -5,4 +5,26 @@
 
 a{
     color: darkorange;
-}
+}
+
+/* Define the scrollbar track */
+div::-webkit-scrollbar {
+    width: 5px; /* Adjust the width as needed */
+  }
+
+  /* Define the scrollbar thumb */
+  div::-webkit-scrollbar-thumb {
+    background-color: orange; /* Change the color of the scrollbar thumb */
+    border-radius: 5px; /* Round the corners of the thumb */
+  }
+
+  /* Define the scrollbar track (background) */
+  div::-webkit-scrollbar-track {
+    background-color: gray; /* Change the color of the scrollbar track */
+  }
+
+  /* Define the scrollbar corner */
+  div::-webkit-scrollbar-corner {
+    background-color: transparent; /* Change the color of the scrollbar corner */
+  }
+

demo/src/utils/data.ts

@@ -0,0 +1,40 @@
+const data = [
+  {
+    id: 1,
+    name: "John Doe",
+    age: 30,
+    address: {
+      street: "123 Main St",
+      city: "New York",
+      state: "NY",
+    },
+    email: "[email protected]",
+    phone: "555-123-4567",
+    hobbies: ["Reading", "Gardening"],
+    isActive: true,
+    socialMedia: {
+      twitter: "@johndoe",
+      instagram: "@johndoe123",
+    },
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    age: 25,
+    address: {
+      street: "456 Elm St",
+      city: "Los Angeles",
+      state: "CA",
+    },
+    email: "[email protected]",
+    phone: "555-987-6543",
+    hobbies: ["Painting", "Cooking"],
+    isActive: false,
+    socialMedia: {
+      twitter: "@janesmith",
+      instagram: "@janesmith456",
+    },
+  },
+];
+
+export default data;