Add snippet for devices

Author: drskullster

TESTING.mdx

@@ -3,6 +3,8 @@ title: "Testing one-two"
 description: "This is the test file"
 ---
 
+import { SupportedDevices } from '/snippets/devices.jsx';
+
 <Info>
   Well, let's just say we are going to test Mintlify with some custom, editor-based pages!
 </Info>
@@ -19,4 +21,8 @@ Are those Dandelions? I don't think so.
   Did you know? Dandelion comes from French 'dent de lion', which means 'Lion tooth'. Crazy!
 </Tip>
 
-So this won't be visible until I publish my changes.
+So this won't be visible until I publish my changes.
+
+<SupportedDevices />
+
+well?

docs.json

@@ -37,7 +37,8 @@
               "learn/welcome/primer",
               "learn/welcome/production-plan",
               "learn/welcome/security",
-              "learn/accounts/support-access"
+              "learn/accounts/support-access",
+              "TESTING"
             ]
           },
           {

snippets/devices.jsx

@@ -0,0 +1,42 @@
+export const SupportedDevices = () => {
+    const [devices, setDevices] = useState();
+
+    useEffect(() => {
+        (async () => {
+            const response = await fetch('https://api.balena-cloud.com/v7/device_type?$select=name,slug,logo&$expand=is_of__cpu_architecture($select=slug)&$filter=is_default_for__application/any(idfa:((idfa/is_host%20eq%20true)%20and%20(idfa/is_archived%20eq%20false)%20and%20(idfa/owns__release/any(r:(status%20eq%20%27success%27)%20and%20(is_final%20eq%20true)%20and%20(is_invalidated%20eq%20false))))%20and%20not(contains(idfa/app_name,%27-esr%27)))&$orderby=name%20asc');
+            const data = await response.json();
+            setDevices(data.d);
+        })();
+    }, []);
+
+    if (!devices) {
+        return <i>loading</i>;
+    }
+
+    if (!devices.length) {
+        return <i>No devices found</i>;
+    }
+
+    return (
+        <table className="not-prose">
+            <thead>
+            <tr>
+                <th></th>
+                <th>Device name</th>
+                <th>Slug</th>
+                <th>Arch</th>
+            </tr>
+            </thead>
+            <tbody>
+            {devices.map((device) => (
+                <tr>
+                    <td><img src={device.logo} width="20" height="20" alt="" style={{ width: '40px', height: '40px' }} /></td>
+                    <td>{device.name}</td>
+                    <td><code>{device.slug}</code></td>
+                    <td><code>{device.is_of__cpu_architecture[0]?.slug}</code></td>
+                </tr>
+            ))}
+            </tbody>
+        </table>
+    )
+}