feat: satori and resvg for rendering

src/components/GenericStats/components/GenericStatsColumn.ts

@@ -1,19 +0,0 @@
-import { Stat } from '../index.js';
-import GenericStatsRow from './GenericStatsRow.js';
-
-export default function GenericStatsColumn(stats: Stat[]) {
-  return `
-    <style>
-      .generic-stats-column {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-    </style>
-
-    <div class="generic-stats-column">
-      ${stats.map((stat) => GenericStatsRow(stat)).join('\n')}
-    </div>
-  `;
-}

src/components/GenericStats/components/GenericStatsColumn.tsx

@@ -0,0 +1,16 @@
+import { Stat } from '../index.js';
+import GenericStatsRow from './GenericStatsRow.js';
+
+export interface GenericStatsColumnProps {
+  stats: Stat[];
+}
+
+export default function GenericStatsColumn({ stats }: GenericStatsColumnProps) {
+  return (
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {stats.map((stat) => (
+        <GenericStatsRow key={stat[0]} stat={stat} />
+      ))}
+    </div>
+  );
+}

src/components/GenericStats/components/GenericStatsRow.ts

@@ -1,29 +0,0 @@
-import { Stat } from '../index.js';
-
-export default function GenericStatsRow(stat: Stat) {
-  return `
-    <style>
-      .generic-stats-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .generic-stats-label {
-        color: #A0A0A0;
-        font-size: 16px;
-      }
-
-      .generic-stats-value {
-        color: white;
-        font-weight: bold;
-        font-size: 16px;
-      }
-    </style>
-
-    <div class="generic-stats-row">
-      <span class="generic-stats-label">${stat[0]}</span>
-      <span class="generic-stats-value">${stat[1]}</span>
-    </div>
-  `;
-}

src/components/GenericStats/components/GenericStatsRow.tsx

@@ -0,0 +1,22 @@
+import { Stat } from '../index.js';
+
+export interface GenericStatsRowProps {
+  stat: Stat;
+}
+
+export default function GenericStatsRow({ stat }: GenericStatsRowProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+    >
+      <span style={{ color: '#A0A0A0', fontSize: 16 }}>{stat[0]}</span>
+      <span style={{ color: 'white', fontWeight: 'bold', fontSize: 16 }}>
+        {stat[1]}
+      </span>
+    </div>
+  );
+}

src/components/GenericStats/index.tsx

@@ -2,7 +2,15 @@ import GenericStatsColumn from './components/GenericStatsColumn.js';
 
 export type Stat = [string, string | number];
 
-export default function GenericStats(stats: Stat[], columnCount = 2) {
+export interface GenericStatsProps {
+  stats: Stat[];
+  columnCount?: number;
+}
+
+export default function GenericStats({
+  stats,
+  columnCount = 2,
+}: GenericStatsProps) {
   const itemsPerRow = Math.ceil(stats.length / columnCount);
   const columns: Stat[][] = [];
 
@@ -12,16 +20,14 @@ export default function GenericStats(stats: Stat[], columnCount = 2) {
     columns[column].push(stat);
   });
 
-  return `
-    <style>
-      .generic-stats {
-        display: flex;
-        gap: 32px;
-      }
-    </style>
-
-    <div class="generic-stats">
-      ${columns.map((column) => GenericStatsColumn(column)).join('\n')}
+  return (
+    <div style={{ display: 'flex', gap: 32 }}>
+      {columns.map((stats) => (
+        <GenericStatsColumn
+          key={stats.map((stat) => stat[0]).join('-')}
+          stats={stats}
+        />
+      ))}
     </div>
-  `;
+  );
 }