init project

2026-06-25 19:06:59 -04:00
parent c5dfee6efb
commit 5d017f533a
349 changed files with 31330 additions and 0 deletions
@@ -0,0 +1,71 @@
+import { BidiText } from '@/components/foundation/BidiText';
+import { StatusBadge, type StatusTone } from '@/components/foundation/StatusBadge';
+import { Card } from '@/components/surfaces/Card';
+import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
+import styles from './ProductPreview.module.css';
+
+export interface PreviewRow {
+  id: string;
+  primary: string;
+  secondary: string;
+  status: string;
+  statusTone?: StatusTone;
+}
+
+interface ProductPreviewProps {
+  title: string;
+  caption: string;
+  rows: PreviewRow[];
+  illustrativeLabel: string;
+  emptyLabel?: string;
+  headingLevel?: HeadingLevel;
+}
+
+export function ProductPreview({
+  title,
+  caption,
+  rows,
+  illustrativeLabel,
+  emptyLabel = 'No preview data',
+  headingLevel = 3,
+}: ProductPreviewProps) {
+  return (
+    <figure className={styles.figure}>
+      <Card tone="elevated" padding="none" className={styles.preview}>
+        <header className={styles.header}>
+          <div>
+            <Heading level={headingLevel} appearance="subheading">
+              {title}
+            </Heading>
+            <Text variant="caption">{illustrativeLabel}</Text>
+          </div>
+          <span className={styles.dots} aria-hidden="true">
+            <i />
+            <i />
+            <i />
+          </span>
+        </header>
+        {rows.length > 0 ? (
+          <div className={styles.table} role="table" aria-label={title}>
+            {rows.map((row) => (
+              <div key={row.id} className={styles.row} role="row">
+                <div role="cell">
+                  <strong>{row.primary}</strong>
+                  <BidiText className={styles.secondary}>{row.secondary}</BidiText>
+                </div>
+                <div role="cell">
+                  <StatusBadge {...(row.statusTone ? { tone: row.statusTone } : {})}>
+                    {row.status}
+                  </StatusBadge>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className={styles.empty}>{emptyLabel}</p>
+        )}
+      </Card>
+      <figcaption>{caption}</figcaption>
+    </figure>
+  );
+}