Use topic.schemaName instead of the deprecated datatype field (#120)

### Changelog

The generated `ExamplePanel` now uses Topic#schemaName instead of the
deprecated datatype field.

### Description


[Topic#datatype](https://github.com/foxglove/studio/blob/56620d28a684503a50f6c793b41b11e968b08254/packages/studio/src/index.ts#L47-L51)
has been marked deprecated and renamed to `schemaName` (see also
https://github.com/foxglove/studio/pull/4582).


![extension](https://github.com/foxglove/create-foxglove-extension/assets/349687/b0e329f0-429a-4fdb-affc-66c47b0593e0)


<table><tr><th>Before</th><th>After</th></tr><tr><td>


![before](https://github.com/foxglove/create-foxglove-extension/assets/349687/cd2c77e2-c242-43d9-b7a6-666c7f34c90c)

<!--before content goes here-->

</td><td>

<!--after content goes here-->

![after](https://github.com/foxglove/create-foxglove-extension/assets/349687/12664b80-f0a1-4c94-8323-b63198b29851)

</td></tr></table>



Fixes: FG-7283

examples/custom-image-extension/src/ExamplePanel.tsx

@@ -47,7 +47,7 @@ function ExamplePanel({ context }: { context: PanelExtensionContext }): JSX.Elem
 
   // Filter all of our topics to find the ones with a CompresssedImage message.
   const imageTopics = useMemo(
-    () => (topics ?? []).filter((topic) => topic.datatype === "sensor_msgs/CompressedImage"),
+    () => (topics ?? []).filter((topic) => topic.schemaName === "sensor_msgs/CompressedImage"),
     [topics],
   );
 

examples/extension-demo/src/ExamplePanel.tsx

@@ -43,7 +43,7 @@ function ExamplePanel({ context }: { context: PanelExtensionContext }): JSX.Elem
 
   // Filter all of our topics to find the ones with a CompresssedImage message.
   const imageTopics = useMemo(
-    () => (topics ?? []).filter((topic) => topic.datatype === "sensor_msgs/CompressedImage"),
+    () => (topics ?? []).filter((topic) => topic.schemaName === "sensor_msgs/CompressedImage"),
     [topics],
   );
 

template/src/ExamplePanel.tsx

@@ -63,11 +63,11 @@ function ExamplePanel({ context }: { context: PanelExtensionContext }): JSX.Elem
       </p>
       <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", rowGap: "0.2rem" }}>
         <b style={{ borderBottom: "1px solid" }}>Topic</b>
-        <b style={{ borderBottom: "1px solid" }}>Datatype</b>
+        <b style={{ borderBottom: "1px solid" }}>Schema name</b>
         {(topics ?? []).map((topic) => (
           <>
             <div key={topic.name}>{topic.name}</div>
-            <div key={topic.datatype}>{topic.datatype}</div>
+            <div key={topic.schemaName}>{topic.schemaName}</div>
           </>
         ))}
       </div>