design

src/features/store-user/ui.tsx

@@ -112,11 +112,25 @@ export function BarAction({
   );
 }
 
-export function Th({ children }: { children?: ReactNode }) {
+/**
+ * A column heading.
+ *
+ * `align` defaults to centre because every store-user table was built that
+ * way and changing them all is not this prop's job. Pass `"end"` for a column
+ * of numbers: a figure is read against the ones above and below it, and that
+ * only works when the digits line up on the right.
+ */
+export function Th({
+  children,
+  align = 'center',
+}: {
+  children?: ReactNode;
+  align?: 'start' | 'center' | 'end';
+}) {
   return (
     <th
       style={{
-        textAlign: 'center',
+        textAlign: align,
         padding: '10px',
         borderBottom: '1px solid var(--color-line)',
         fontSize: 12,
@@ -134,15 +148,17 @@ export function Td({
   children,
   isMuted,
   isStrong,
+  align = 'center',
 }: {
   children: ReactNode;
   isMuted?: boolean;
   isStrong?: boolean;
+  align?: 'start' | 'center' | 'end';
 }) {
   return (
     <td
       style={{
-        textAlign: 'center',
+        textAlign: align,
         padding: '10px',
         borderBottom: '1px solid color-mix(in oklab, var(--color-line) 55%, transparent)',
         color: isMuted ? 'var(--color-ink-3)' : 'var(--color-ink-1)',