Add example code

unstoppabledomains · Nov 2, 2023 · 9cd1596 · 9cd1596
1 parent 790299a
commit 9cd1596
Show file tree

Hide file tree

Showing 3 changed files with 238 additions and 18 deletions.
diff --git a/server/package.json b/server/package.json
@@ -72,6 +72,7 @@
     "qs": "^6.11.2",
     "ramda": "^0.27.1",
     "react": "^18.0.0",
+    "react-code-blocks": "^0.1.4",
     "react-dom": "^18.0.0",
     "react-emoji-render": "^2.0.1",
     "react-hook-form": "^7.42.1",

diff --git a/server/pages/examples/unstoppable-messaging/index.page.tsx b/server/pages/examples/unstoppable-messaging/index.page.tsx
@@ -3,43 +3,83 @@ import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import React from 'react';
+import {CodeBlock, dracula} from 'react-code-blocks';
 
 import {
   UnstoppableMessaging,
   useUnstoppableMessaging,
 } from '@unstoppabledomains/ui-components';
 
+const exampleCode = `import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import React from 'react';
+
 const UnstoppableMessagingDemo = () => {
   // Hook provides utility methods, such as opening the Unstoppable
   // Messaging window by clicking a button
   const {isChatReady, setOpenChat} = useUnstoppableMessaging();
 
-  // Use a domain to demonstrate opening the chat window to a specific
-  // conversation using a hook
-  const myFriendDomain = 'quirk.x';
-
   // Open a chat window to a specific user
   const handleOpenChat = () => {
     setOpenChat(myFriendDomain);
   };
 
   return (
     <Paper sx={{margin: 5, padding: 5}}>
-      <Typography variant="h5">Unstoppable Messaging Demo</Typography>
-      <Typography variant="body1">
-        The source code for this demo can be found{' '}
-        <a href="https://github.com/unstoppabledomains/domain-profiles/tree/main/examples/unstoppable-messaging">
-          here
-        </a>{' '}
-        on GitHub.
-      </Typography>
       <Box display="flex" marginTop={2}>
         <UnstoppableMessaging />
         <Button variant="contained" onClick={handleOpenChat}>
-          {isChatReady ? `Open chat with ${myFriendDomain}` : 'Setup chat'}
+          {isChatReady ? 'Open chat with quirk.x' : 'Setup chat'}
         </Button>
       </Box>
     </Paper>
+  )
+};`;
+
+const UnstoppableMessagingDemo = () => {
+  // Hook provides utility methods, such as opening the Unstoppable
+  // Messaging window by clicking a button
+  const {isChatReady, setOpenChat} = useUnstoppableMessaging();
+
+  // Use a domain to demonstrate opening the chat window to a specific
+  // conversation using a hook
+  const myFriendDomain = 'quirk.x';
+
+  // Open a chat window to a specific user
+  const handleOpenChat = () => {
+    setOpenChat(myFriendDomain);
+  };
+
+  return (
+    <>
+      <Paper sx={{margin: 5, padding: 5}}>
+        <Typography variant="h5">Unstoppable Messaging Demo</Typography>
+        <Typography variant="body1">
+          The source code for this demo and the included React components can be
+          found{' '}
+          <a href="https://github.com/unstoppabledomains/domain-profiles/tree/main/examples/unstoppable-messaging">
+            here
+          </a>{' '}
+          on GitHub.
+        </Typography>
+        <Box display="flex" marginTop={2}>
+          <UnstoppableMessaging />
+          <Button variant="contained" onClick={handleOpenChat}>
+            {isChatReady ? `Open chat with ${myFriendDomain}` : 'Setup chat'}
+          </Button>
+        </Box>
+        <Box marginTop={5}>
+          <Typography variant="h6">Example code</Typography>
+          <CodeBlock
+            text={exampleCode}
+            language="typescript"
+            showLineNumbers={true}
+            theme={dracula}
+          />
+        </Box>
+      </Paper>
+    </>
   );
 };