allowing for expandable toml

packages/docs/components/Expandable.tsx

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react';
+
+
+const Expandable= ({ children }) => {
+    const [expanded, setExpanded] = useState(false);
+
+    const toggleExpand = () => {
+        setExpanded(!expanded);
+    };
+
+    return (
+        <div>
+            {children}
+            <button onClick={toggleExpand}>{expanded ? 'Collapse' : 'Expand'}</button>
+        </div>
+    );
+};
+
+export default Expandable;

packages/docs/pages/ledger/env-vars.mdx

@@ -1,12 +1,13 @@
 import { Callout } from 'nextra-theme-docs'
-// import ExpandableToml from "../../components/ExpandableToml"; #TODO: Use this component when properly css'd
+import Expandable from "../../components/Expandable"; // TODO: Use this component when properly css'd
 
 # Environment variables
 
 By default, whenever the namada ledger is started, it will apply the confirguration found in the ledger configuration file.
 
 An example of a ledger configuration file is displayed below.
 
+<Expandable>
 ```toml
 wasm_dir = "wasm"
 
@@ -38,6 +39,7 @@ priv_validator_laddr = ""
 
 ...
 ```
+</Expandable>
 
 However, it is possible to override the configuration by setting environment variables.
 Any variable found in the config can be accessed through environment variables that are constructed in the below manner.