website: update example.

Author: jaywcjlove

www/src/App.tsx

@@ -1,6 +1,9 @@
 import GitHubCorners from '@uiw/react-github-corners';
-import { styled } from "goober";
 import CSVReader from '@uiw/react-csv-reader';
+import JsonView from '@uiw/react-json-view';
+import { lightTheme } from '@uiw/react-json-view/light';
+import { styled } from "goober";
+import { CSSProperties, useState } from 'react';
 import MarkdownPreview from './Markdown';
 
 const Header = styled('header')`
@@ -25,24 +28,40 @@ const Wrappper = styled('div')`
   padding-bottom: 5rem;
 `;
 
+const Examples = styled('div')`
+  text-align: left;
+  display: inline-block;
+`;
 
 export default function App() {
+  const [value, setValue] = useState<any[]>([]);
   return (
     <Wrappper>
       <GitHubCorners fixed target="__blank" zIndex={10} href="https://github.com/uiwjs/react-csv-reader" />
       <Header>
         <h1>
         CSV Reader for React<SupVersion>v{VERSION}</SupVersion>
         </h1>
-        <CSVReader
-          parserOptions={{
-            // header: true,
-            // worker: true,
-          }}
-          onFileLoaded={(data) => {
-            console.log('data:', data)
-          }}
-        />
+        <Examples>
+          <CSVReader
+            parserOptions={{
+              // header: true,
+              // worker: true,
+            }}
+            onFileLoaded={(data) => {
+              setValue(data);
+              console.log('data:', data)
+            }}
+          />
+          {value && value.length > 0 && (
+            <JsonView
+              keyName="data"
+              value={value}
+              collapsed={false}
+              style={lightTheme as CSSProperties}
+            />
+          )}
+        </Examples>
       </Header>
       <MarkdownPreview />
     </Wrappper>