More convert to jsx

src/render/html/component/method.tsx

@@ -0,0 +1,28 @@
+import type { Method, Playbill } from "@proscenium/playbill";
+import { AbilityCard } from "./ability";
+import { Section } from "./base/react-section";
+
+export function MethodSection(method: Method, playbill: Playbill) {
+  const ranks = method.abilities.map((rank, i) => {
+    return <div className="method-rank" key={i}>
+      <h3>Rank {i + 1}</h3>
+      <div className="method-rank-content">
+        {rank.map((abilityId) => {
+          const ability = playbill.abilities[abilityId];
+          return <AbilityCard ability={ability} key={abilityId} />;
+        })
+        }
+      </div>
+    </div>
+  });
+
+  return <Section
+    type="method"
+    componentId={method.id}
+    title={method.name}
+    preInfo={<p className="method-curator">{method.curator}</p>}
+    info={<p className="method-description">{method.description}</p>}
+    content={<div className="method-ranks">{ranks}</div>}
+  />
+
+}