91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import {Heading} from '@astryxdesign/core/Text';
|
|
import {Badge} from '@astryxdesign/core/Badge';
|
|
import type {TablePartSpec} from '@/features/loyaly-ai/types/chat';
|
|
|
|
export function TableBlock({tables}: {tables: TablePartSpec[]}) {
|
|
if (!tables || tables.length === 0) return null;
|
|
|
|
return (
|
|
<div className="space-y-4 w-full">
|
|
{tables.map((t, idx) => (
|
|
<div
|
|
key={t.title || idx}
|
|
className="rounded-xl border border-border bg-card overflow-hidden shadow-sm"
|
|
>
|
|
{t.title ? (
|
|
<div className="p-4 border-b border-border bg-card">
|
|
<Heading level={4} className="text-sm font-semibold text-primary">
|
|
{t.title}
|
|
</Heading>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="overflow-x-auto w-full">
|
|
<table className="w-full text-left text-xs border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted/40 text-secondary font-medium">
|
|
{t.columns.map((col) => (
|
|
<th
|
|
key={col.key}
|
|
className={`px-4 py-3 ${
|
|
col.align === 'end'
|
|
? 'text-right'
|
|
: col.align === 'center'
|
|
? 'text-center'
|
|
: 'text-left'
|
|
}`}
|
|
>
|
|
{col.header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border/60">
|
|
{t.rows.map((row, rIdx) => (
|
|
<tr key={rIdx} className="hover:bg-white/[0.02] transition-colors">
|
|
{t.columns.map((col) => {
|
|
const val = row[col.key];
|
|
const valStr = String(val ?? '');
|
|
const isStatus = col.key === 'status' || col.key === 'state';
|
|
|
|
return (
|
|
<td
|
|
key={col.key}
|
|
className={`px-4 py-3 text-primary ${
|
|
col.align === 'end'
|
|
? 'text-right'
|
|
: col.align === 'center'
|
|
? 'text-center'
|
|
: 'text-left'
|
|
}`}
|
|
>
|
|
{isStatus ? (
|
|
<Badge
|
|
variant={
|
|
valStr.toLowerCase() === 'active' || valStr.toLowerCase() === 'paid'
|
|
? 'success'
|
|
: valStr.toLowerCase() === 'warning' || valStr.toLowerCase() === 'at risk'
|
|
? 'warning'
|
|
: 'neutral'
|
|
}
|
|
label={valStr}
|
|
/>
|
|
) : (
|
|
valStr
|
|
)}
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|