feat: new stats renderer

src/components/Children.ts

@@ -0,0 +1,5 @@
+export type ChildrenArgument = string | string[];
+
+export default function Children(children: string[]) {
+  return children.join('\n');
+}

src/components/GenericStats/components/GenericStatsColumn.ts

@@ -0,0 +1,19 @@
+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/GenericStatsRow.ts

@@ -0,0 +1,29 @@
+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/index.ts

@@ -0,0 +1,27 @@
+import GenericStatsColumn from './components/GenericStatsColumn.js';
+
+export type Stat = [string, string | number];
+
+export default function GenericStats(stats: Stat[], columnCount = 2) {
+  const itemsPerRow = Math.ceil(stats.length / columnCount);
+  const columns: Stat[][] = [];
+
+  stats.forEach((stat, index) => {
+    const column = Math.floor(index / itemsPerRow);
+    if (!columns[column]) columns[column] = [];
+    columns[column].push(stat);
+  });
+
+  return `
+    <style>
+      .generic-stats {
+        display: flex;
+        gap: 32px;
+      }
+    </style>
+
+    <div class="generic-stats">
+      ${columns.map((column) => GenericStatsColumn(column)).join('\n')}
+    </div>
+  `;
+}

src/components/Screenshot.ts

@@ -0,0 +1,26 @@
+import Children from './Children.js';
+
+export default function Screenshot(...children: string[]) {
+  return `
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:[email protected]');
+      @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]');
+  
+      body {
+        margin: 0;
+      }
+
+      * {
+        font-family: 'Roboto Flex', sans-serif;
+      }
+
+      #screenshot {
+        display: flex;
+      }
+    </style>
+
+    <div id="screenshot">
+      ${Children(children)}
+    </div>
+  `;
+}

src/components/TitleBar.ts

@@ -0,0 +1,69 @@
+export default function TitleBar(
+  name: string,
+  image: string,
+  nameDiscriminator = '',
+  description = '',
+) {
+  return `
+    <style>
+      .title-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .title-bar-info {
+        display: flex;
+        gap: 8px;
+      }
+
+      .title-bar-avatar {
+        width: 64px;
+        height: 64px;
+      }
+
+      .title-bar-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .title-bar-name {
+        font-size: 32px;
+        color: white;
+        font-weight: 900;
+      }
+
+      .title-bar-discriminator {
+        color: #A0A0A0;
+      }
+
+      .title-bar-description {
+        color: #A0A0A0;
+        font-size: 16px;
+      }
+
+      .title-bar-blitzkrieg {
+        width: 64px;
+        height: 64px;
+      }
+    </style>
+
+    <div class="title-bar">
+      <div class="title-bar-info">
+        <img class="title-bar-avatar" src="${image}" />
+
+        <div class="title-bar-text">
+          <span class="title-bar-name">
+            ${name}
+            <span class="title-bar-discriminator">${nameDiscriminator}</span>
+          </span>
+
+          <span class="title-bar-description">${description}</span>
+        </div>
+      </div>
+
+      <img class="title-bar-blitzkrieg" src="https://i.imgur.com/35phKIu.png" />
+    </div>
+  `;
+}

src/components/Wrapper.ts

@@ -0,0 +1,21 @@
+import Children from './Children.js';
+
+export default function Wrapper(...children: string[]) {
+  return `
+    <style>
+      #wrapper {
+        display: flex;
+        flex-direction: column;
+        padding: 16px;
+        gap: 32px;
+        width: 640px;
+        background: black;
+        color: white;
+      }
+    </style>
+
+    <div id="wrapper">
+      ${Children(children)}
+    </div>
+  `;
+}