import { useTapSize } from '@tappify/extension-sdk';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@tappify/extension-sdk/ui';
function Keywords({ rows }: { rows: { term: string }[] }) {
const size = useTapSize();
const shown = size === 'slot' ? rows.slice(0, 3) : rows;
return (
<Table>
<TableHeader>
<TableRow variant="header"><TableHead>Term</TableHead></TableRow>
</TableHeader>
<TableBody>
{shown.map(row => (
<TableRow key={row.term}><TableCell>{row.term}</TableCell></TableRow>
))}
</TableBody>
</Table>
);
}