feat: add mobile card components

src/web/components/MobileCard.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+type MobileCardProps = {
+  title: React.ReactNode;
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+type MobileFieldProps = {
+  label: React.ReactNode;
+  value: React.ReactNode;
+};
+
+export function MobileCard({ title, actions, children }: MobileCardProps) {
+  return (
+    <div className="mobile-card">
+      <div className="mobile-card-header">
+        <div className="mobile-card-title">{title}</div>
+        {actions ? <div className="mobile-card-actions">{actions}</div> : null}
+      </div>
+      <div className="mobile-card-body">{children}</div>
+    </div>
+  );
+}
+
+export function MobileField({ label, value }: MobileFieldProps) {
+  return (
+    <div className="mobile-field">
+      <div className="mobile-field-label">{label}</div>
+      <div className="mobile-field-value">{value}</div>
+    </div>
+  );
+}

src/web/components/mobile-card.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { create } from 'react-test-renderer';
+import { MobileCard, MobileField } from './MobileCard.js';
+
+describe('MobileCard', () => {
+  it('renders title and fields', () => {
+    const root = create(
+      <MobileCard title="CardTitle">
+        <MobileField label="Status" value="OK" />
+      </MobileCard>,
+    );
+
+    const text = root.root.findAll(() => true)
+      .flatMap((instance) => instance.children)
+      .filter((child): child is string => typeof child === 'string')
+      .join('');
+
+    expect(text).toContain('CardTitle');
+    expect(text).toContain('Status');
+    expect(text).toContain('OK');
+  });
+});