2b:null 2c:["$","title",null,{"children":"Hello Ant Design | Alok Pepakayala | Observable"}] 31:[{"id":"d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","href":"https://static.observableusercontent.com/files/d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","name":"cover.png","type":"image/png","lastModified":1647174725512.379,"size":27037}] 2f:{"id":"73f0a71d25cf19ab","slug":"hello-ant-design","title":"Hello Ant Design","thumbnail":"b4914c6f8b0f85c03cca1b5c4ab4a611ad7221f460b5de98fc3aba9c93435b42","access_level":"public","create_time":"$D2022-03-13T12:03:57.603Z","update_time":"$D2022-04-04T23:23:29.415Z","view_time":null,"first_public_time":"$D2022-03-13T12:35:17.732Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":96,"publish_version":96,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Hello Ant Design","cells":[{"id":0,"value":"md`# Hello Ant Design`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"FileAttachment(\"cover.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"md`Using Ant Design React components in observable notebooks using preact and htm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"mutable step_number = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"{\n const dom = html`

`;\n const shadow = dom.shadowRoot || dom.attachShadow({ mode: \"open\" });\n const update_step_number = (d) => (mutable step_number = d);\n const Steps = antd.Steps;\n const Step = Steps.Step;\n\n React.render(\n htm`

\n \n <${Steps} current=${step_number} onChange=${update_step_number}>\n <${Step} title=\"Finished\" description=\"This is a description.\" />\n <${Step} title=\"In Progress\" subTitle=\"Left 00:00:08\" description=\"This is a description.\" />\n <${Step} title=\"Waiting\" description=\"This is a description.\" />\n \n `,\n shadow\n );\n return dom;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"md`---\n## Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"requires = require.alias({\n htm: \"https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.umd.js\",\n preact: \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/preact.umd.js\",\n \"preact/hooks\":\n \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/hooks.umd.js\",\n react: \"https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js\",\n \"react-dom\": \"https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js\",\n antd: \"https://cdnjs.cloudflare.com/ajax/libs/antd/4.19.1/antd.min.js\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"React = requires(\"react\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"htm = requires(\"htm\").then((d) => d.bind(React.createElement))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"antd = requires(\"antd\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"