feat: some UX improvements

walnuthq · Mar 6, 2024 · 6469fac · 6469fac
1 parent be78708
commit 6469fac
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/components/ui/Doc.tsx b/components/ui/Doc.tsx
@@ -93,7 +93,7 @@ export const A: React.FC<LinkProps> = ({ children, href }) => (
 
 export const Pre: React.FC<Props> = ({ children }) => (
   <div>
-    <pre className="text-tiny inline-block whitespace-pre-wrap p-5 mb-4 bg-indigo-100 dark:bg-gray-800 rounded">
+    <pre className="w-full text-tiny inline-block whitespace-pre-wrap p-5 mb-4 bg-indigo-100 dark:bg-gray-800 rounded">
       {children}
     </pre>
   </div>

diff --git a/components/ui/StackBox.tsx b/components/ui/StackBox.tsx
@@ -27,13 +27,15 @@ export const StackBox: React.FC<Props> = ({
         <div
           key={index}
           className={cn(
-            'font-mono inline-block border px-2 py-1 mb-1 rounded-sm',
+            'font-mono mb-1 rounded-sm',
             { 'w-full': isFullWidth, 'mr-1': !isFullWidth },
             className,
           )}
           style={{ minHeight: 26 }}
         >
-          {p.trim().replace(/\\\|/g, '|')}
+          <span className={cn('px-2 py-1 border', className)}>
+            {p.trim().replace(/\\\|/g, '|')}
+          </span>
         </div>
       ))}
     </>

diff --git a/docs/libfuncs/array_get.mdx b/docs/libfuncs/array_get.mdx
@@ -5,38 +5,47 @@ fallthroughBranch: 'rangeCheck | element'
 statementBranch: 'rangeCheck'
 ---
 
-## Description
+# Description
 
 Gets an array element at a given index, handling out-of-range scenarios with a Statement branch.
 
-## Syntax
+# Syntax
 
-`array_get<T>([rangeCheck]: RangeCheck, [array]: Array<T>, [index]: usize) { fallthrough([rangeCheck]: RangeCheck, [element]: Box<T>), <StatementIdx>([rangeCheck]: RangeCheck) }`
+```
+array_get<T>([rangeCheck]: RangeCheck, [array]: Array<T>, [index]: usize) {
+    fallthrough([rangeCheck]: RangeCheck, [element]: Box<T>)
+    <StatementIdx>([rangeCheck]: RangeCheck)
+}
+```
 
-## Invoke Refs
+# Invoke Refs
 
 |      Name      | Description                      |     Type     |
 | :------------: | :------------------------------- | :----------: |
 | `[rangeCheck]` | Internal RangeCheck              | `RangeCheck` |
 |   `[array]`    | The array to read                |  `Array<T>`  |
 |   `[index]`    | The index of the element to read |   `usize`    |
 
-## Output Refs
+# Output Refs
 
-### Fallthrough Branch
+## Fallthrough Branch
 
 |      Name      | Description                              |     Type     |
 | :------------: | :--------------------------------------- | :----------: |
 | `[rangeCheck]` | The updated RangeCheck                   | `RangeCheck` |
 |  `[element]`   | A pointer to an element at a given index |   `Box<T>`   |
 
-### Target Statement Branch
+## Target Statement Branch
 
 |      Name      | Description            |     Type     |
 | :------------: | :--------------------- | :----------: |
 | `[rangeCheck]` | The updated RangeCheck | `RangeCheck` |
 
-## Example 1
+# Examples
+
+## Example 1 - Fallthrough branch
+
+Reading the element at index 1 from an array of 4 elements.
 
 `array_get<u32>([rangeCheck], [array], [index]) { fallthrough([rangeCheck], [element]) 59([rangeCheck]) }`
 
@@ -66,7 +75,14 @@ Gets an array element at a given index, handling out-of-range scenarios with a S
 | `rangeCheck` |  141  |
 |  `element`   |  146  |
 
-## Example 2
+## Example 2 -Statement branch
+
+```
+array_get<u32>([rangeCheck], [array], [index]) {
+    fallthrough([rangeCheck], [element])
+    59([rangeCheck])
+}
+```
 
 ### Memory