Add examples

Author: handotdev

content/examples.ts

@@ -0,0 +1,90 @@
+export default [
+  {
+    languageId: 'python',
+    format: 'reST',
+    code: `def encrypt_char(c):
+  if c in ascii_uppercase:
+      ltrs = ascii_uppercase
+  elif c in ascii_lowercase:
+      ltrs = ascii_lowercase
+  else:
+      return c
+  new_index = (ltrs.index(c) + 13) % 26
+  return ltrs[new_index]`,
+  },
+  {
+    languageId: 'python',
+    format: 'reST',
+    code: `def maximum_subarray():
+  str_input = (','.join(i for i in sys.argv[1:])).strip()
+  if str_input == "":
+    print("Usage: Please provide a list of at least two integers to sort in the format: '1, 2, 3, 4, 5'")
+    return
+
+  arr = [int(num) for num in str_input.split(',')]
+  ans = 0
+  curr_sum = 0
+  for i in range(len(arr)):
+    if (curr_sum + arr[i] > 0):
+        curr_sum += arr[i]
+    else:
+        curr_sum = 0
+    ans = max(ans, curr_sum)
+  print(ans)
+  return`,
+  },
+  {
+    languageId: 'typescript',
+    format: 'JSDoc',
+    code: `export const getFirstNodeByValue = (node: TreeNode | null, value: string): TreeNode | null => {
+  if (node?.children == null) {
+    return null;
+  }
+  if (node.value === value.trim()) {
+    return node;
+  }
+
+  let i = 0;
+  let result = null;
+  for(i = 0; result == null && i < node.children.length; i++){
+    result = getFirstNodeByValue(node.children[i], value);
+  }
+  return result;
+}`,
+  },
+  {
+    languageId: 'javascript',
+    format: 'JSDoc',
+    code: `function binarySearch(array, target, start = 0, end = array.length - 1) {
+
+  const isOrdered = array.every((num, i, arr) => !i || num >= arr[i - 1]);
+  if (!isOrdered) return error;
+  
+  const middleIndex = Math.floor((start + end) / 2);
+  const middleValue = array[middleIndex];
+  const newIndexes = target < middleValue ? [start, middleIndex - 1] : [middleIndex + 1, end];
+  
+  return middleValue === target
+    ? true
+    : start >= end
+      ? false
+      : binarySearch(array, target, ...newIndexes);
+  };`,
+  },
+  {
+    languageId: 'javascript',
+    format: 'Google',
+    code: `async function getOrganizationFromToken(token) {
+  const authToken = await AuthToken.findOne({ promptlyToken: token });
+
+  if (authToken == null) throw new Error('Invalid token');
+  const organization = await Organization.findOne({
+    members: authToken.email,
+  });
+
+  if (organization == null) throw new Error('No organization found');
+
+  return organization;
+}`,
+  },
+];

pages/index.tsx

@@ -16,6 +16,7 @@ import CodeEditor from '../components/CodeEditor';
 import Output from '../components/Output';
 import vscode from '../assets/vsc.svg';
 import logo from '../assets/mintlify.svg';
+import EXAMPLES from '../content/examples';
 
 const ENDPOINT = process.env.NODE_ENV === 'development'
   ? 'http://localhost:5000'
@@ -124,6 +125,21 @@ export default function Example() {
     });
   };
 
+  const onGenerateExample = () => {
+    const randomExample = EXAMPLES[Math.floor(Math.random() * EXAMPLES.length)];
+    const foundLanguage = languagesDropdown.find(
+      (languageOption) => languageOption.id === randomExample.languageId,
+    );
+    const foundFormat = formats.find(
+      (format) => format.id === randomExample.format,
+    );
+    if (foundLanguage == null || foundFormat == null) return;
+
+    setSelectedLanguage(foundLanguage);
+    setSelectedFormat(foundFormat);
+    setCode(randomExample.code);
+  };
+
   const onClickGenerate = async () => {
     setIsGenerating(true);
     setOutputDisplay('');
@@ -211,14 +227,23 @@ export default function Example() {
       <main className="relative -mt-32 z-10">
         <div className="max-w-screen-xl mx-auto pb-6 px-4 sm:px-6 lg:pb-8 lg:px-8">
           <div className="rounded-lg">
-            <div className="grid sm:grid-cols-2 sm:gap-4">
+            <div className="grid sm:grid-cols-2 sm:gap-x-4 sm:gap-y-1">
               <div className="h-full">
                 <CodeEditor
                   code={code}
                   setCode={onCodeChange}
                   placeholder="Type or paste code here"
                   languageGrammar={selectedLanguage.grammar}
                 />
+                <div className="w-full text-right px-1">
+                  <button
+                    className="mt-1 text-primary text-sm hover:opacity-80 duration-100"
+                    type="button"
+                    onClick={onGenerateExample}
+                  >
+                    Get example
+                  </button>
+                </div>
               </div>
               <div className="h-full mt-4 sm:m-0">
                 <Output