Refactor frontend pages and config components into single-component files for Task 13

frontend/src/pages/jail/BantimeEscalationSection.tsx

@@ -0,0 +1,61 @@
+import { Badge, Text } from "@fluentui/react-components";
+import { useCommonSectionStyles } from "../../theme/commonStyles";
+import { useJailDetailPageStyles } from "./jailDetailPageStyles";
+import type { Jail } from "../../types/jail";
+import { formatSeconds } from "../../utils/formatDate";
+
+interface BantimeEscalationSectionProps {
+  jail: Jail;
+}
+
+export function BantimeEscalationSection({ jail }: BantimeEscalationSectionProps): React.JSX.Element | null {
+  const styles = useJailDetailPageStyles();
+  const sectionStyles = useCommonSectionStyles();
+  const esc = jail.bantime_escalation;
+  if (!esc?.increment) return null;
+
+  return (
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
+        <Text as="h2" size={500} weight="semibold">
+          Ban-time Escalation
+        </Text>
+        <Badge appearance="filled" color="informative">enabled</Badge>
+      </div>
+      <div className={styles.grid}>
+        {esc.factor !== null && (
+          <>
+            <Text className={styles.label}>Factor:</Text>
+            <Text className={styles.mono}>{String(esc.factor)}</Text>
+          </>
+        )}
+        {esc.formula && (
+          <>
+            <Text className={styles.label}>Formula:</Text>
+            <Text className={styles.mono}>{esc.formula}</Text>
+          </>
+        )}
+        {esc.multipliers && (
+          <>
+            <Text className={styles.label}>Multipliers:</Text>
+            <Text className={styles.mono}>{esc.multipliers}</Text>
+          </>
+        )}
+        {esc.max_time !== null && (
+          <>
+            <Text className={styles.label}>Max time:</Text>
+            <Text>{formatSeconds(esc.max_time)}</Text>
+          </>
+        )}
+        {esc.rnd_time !== null && (
+          <>
+            <Text className={styles.label}>Random jitter:</Text>
+            <Text>{formatSeconds(esc.rnd_time)}</Text>
+          </>
+        )}
+        <Text className={styles.label}>Count across all jails:</Text>
+        <Text>{esc.overall_jails ? "yes" : "no"}</Text>
+      </div>
+    </div>
+  );
+}