feat:change layout of value utilities documentation

apps/playground/src/pages/apis/data/value/addasset-operator.tsx

@@ -0,0 +1,60 @@
+import { Asset, MeshValue } from "@meshsdk/common";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+
+export default function AddassetOperator() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="AddassetOperator"
+      title="Add an asset to the Value class's value record with parameters - asset"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        <code>addAsset</code> Add an asset to the Value class's value record
+        with parameters:
+      </p>
+      <ul>
+        <b>asset</b> - Asset to add
+      </ul>
+    </>
+  );
+}
+
+function Right() {
+  async function runaddassetDemo() {
+    const value = new MeshValue();
+    const singleAsset: Asset = {
+      unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234",
+      quantity: "100",
+    };
+    value.addAsset(singleAsset);
+    return value.value;
+  }
+
+  let code = `
+  import { MeshValue } from "@meshsdk/common";
+  const value = new MeshValue();
+  const singleAsset: Asset = { unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234", quantity: "100" };
+  value.addAsset(singleAsset);
+  return value.value;
+    `;
+
+  return (
+    <>
+      <LiveCodeDemo
+        title="addAsset"
+        subtitle="Add an asset to the Value class's value record with parameters - asset"
+        code={code}
+        runCodeFunction={runaddassetDemo}
+      />
+    </>
+  );
+}

apps/playground/src/pages/apis/data/value/addassets-operator.tsx

@@ -0,0 +1,73 @@
+import { Asset, MeshValue } from "@meshsdk/common";
+
+import LiveCodeDemo from "~/components/sections/live-code-demo";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+
+export default function AddassetsOperator() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="AddassetsOperator"
+      title="Add an array of assets to the Value class's value record with parameters - assets"
+      leftSection={Left()}
+      rightSection={Right()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        <code>addAssets</code> Add an array of assets to the Value class's value
+        record with parameters:
+      </p>
+      <ul>
+        <b>assets</b> - Asset[] to add
+      </ul>
+    </>
+  );
+}
+
+function Right() {
+  async function runaddassetsDemo() {
+    const value = new MeshValue();
+    const assets: Asset[] = [
+      {
+        unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234",
+        quantity: "100",
+      },
+      { unit: "lovelace", quantity: "10" },
+      {
+        unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234",
+        quantity: "100",
+      },
+      { unit: "lovelace", quantity: "10" },
+    ];
+    value.addAssets(assets);
+    return value.value;
+  }
+
+  let code = `
+  import { MeshValue } from "@meshsdk/common";
+  const value = new MeshValue();
+  const assets: Asset[] = [
+      { unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234", quantity: "100" },
+      { unit: "lovelace", quantity: "10" },
+      { unit: "baefdc6c5b191be372a794cd8d40d839ec0dbdd3c28957267dc817001234", quantity: "100" },
+      { unit: "lovelace", quantity: "10" },
+  ];
+  value.addAssets(assets);
+  return value.value;
+  `;
+
+  return (
+    <>
+      <LiveCodeDemo
+        title="addAssets"
+        subtitle="Add an array of assets to the Value class's value record with parameters - assets"
+        code={code}
+        runCodeFunction={runaddassetsDemo}
+      />
+    </>
+  );
+}