website: update example.

uiwjs · Jul 23, 2023 · 4113ddc · 4113ddc
1 parent a9a7310
commit 4113ddc
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 8 deletions.
diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -1,15 +1,56 @@
 import Github from '@uiw/react-shields/esm/github';
 import Npm from '@uiw/react-shields/esm/npm';
+import { useState } from 'react';
 import styled from 'styled-components';
+import MarkdownPreview from '@uiw/react-markdown-preview';
 
-const Footer = styled.footer`
+const EditorWrapper = styled.div`
+  padding-bottom: 10px;
+  margin: 0 auto;
+  width: 100%;
+  textarea {
+    width: 100%;
+    min-height: 120px;
+    min-width: 100%;
+    padding: 5px;
+    margin-top: 10px;
+    box-sizing: border-box;
+  }
+  .editor-preview {
+    border: 1px solid var(--color-border-default);
+    border-radius: 5px;
+    margin-top: 10px;
+    min-height: 60px;
+    padding: 16px;
+  }
+`;
+
+let val = 1;
+
+export const Example = () => {
+  const [value, setValue] = useState('');
+  return (
+    <EditorWrapper>
+      <button onClick={() => setValue('# Markdown ' + val++)}>set value</button>
+      <textarea
+        placeholder="Please enter the Markdown code!"
+        value={value}
+        spellCheck="false"
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <MarkdownPreview className="editor-preview" source={value} />
+    </EditorWrapper>
+  );
+};
+
+const FooterWrapper = styled.footer`
   text-align: center;
   padding-top: 30px;
 `;
 
-const App = () => {
+export const Footer = () => {
   return (
-    <Footer>
+    <FooterWrapper>
       <Github user="uiwjs" repo="react-markdown-preview">
         <Github.Social type="forks" href="https://github.com/uiwjs/react-markdown-preview" />
         <Github.Social type="stars" href="https://github.com/uiwjs/react-markdown-preview/stargazers" />
@@ -20,8 +61,6 @@ const App = () => {
         packageName="react-markdown-preview"
         href="https://www.npmjs.com/package/@uiw/react-markdown-preview"
       />
-    </Footer>
+    </FooterWrapper>
   );
 };
-
-export default App;
diff --git a/website/src/index.tsx b/website/src/index.tsx
@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import MarkdownPreviewExample from '@uiw/react-markdown-preview-example';
 import data from '@uiw/react-markdown-preview/README.md';
-import Example from './App';
+import { Footer, Example } from './App';
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
@@ -20,6 +20,9 @@ root.render(
     version={`v${VERSION}`}
   >
     <MarkdownPreviewExample.Github href="https://github.com/uiwjs/react-markdown-preview" />
-    <Example />
+    <MarkdownPreviewExample.Example>
+      <Example />
+    </MarkdownPreviewExample.Example>
+    <Footer />
   </MarkdownPreviewExample>,
 );