feat: /inactive face lift

src/components/NoBattlesInPeriod.tsx

@@ -1,17 +0,0 @@
-import { theme } from '../stitches.config.js';
-
-export default function NoBattlesInPeriod() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
-        No battles played in this period
-      </span>
-    </div>
-  );
-}

src/components/NoData.tsx

@@ -0,0 +1,31 @@
+import { theme } from '../stitches.config.js';
+
+export enum NoDataType {
+  Battles,
+  Players,
+}
+
+export interface NoDataProps {
+  type: NoDataType;
+}
+
+const NO_DATA_MESSAGES: Record<NoDataType, string> = {
+  [NoDataType.Battles]: 'No battles played in this period',
+  [NoDataType.Players]: 'No players in this period',
+};
+
+export default function NoData({ type }: NoDataProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+        {NO_DATA_MESSAGES[type]}
+      </span>
+    </div>
+  );
+}