1/* oxlint-disable react/no-array-index-key -- Captured table cells have stable positions and may contain identical values. */
2import { ScrollView, View } from "react-native";
3import type { parseDelimitedPreview } from "@t3tools/shared/delimitedPreview";
4import { AppText as Text } from "../../components/ui/AppText";
5import { FilePreviewNotice } from "./FilePreviewFeedback";
6
7export function DelimitedFilePreview(props: {
8 readonly table: ReturnType<typeof parseDelimitedPreview>;
9}) {
10 return (
11 <ScrollView className="flex-1">
12 {props.table.truncated ? (
13 <FilePreviewNotice>
14 Table limited to the first 100 rows and 30 columns. Source shows the rest.
15 </FilePreviewNotice>
16 ) : null}
17 <ScrollView horizontal>
18 <View>
19 {props.table.rows.map((row, rowIndex) => (
20 <View key={rowIndex} className={rowIndex === 0 ? "flex-row bg-subtle" : "flex-row"}>
21 {row.map((cell, columnIndex) => (
22 <View key={columnIndex} className="w-48 border-r border-b border-border px-3 py-2">
23 <Text
24 selectable
25 className={
26 rowIndex === 0
27 ? "text-sm font-t3-semibold text-foreground"
28 : "text-sm text-foreground"
29 }
30 >
31 {cell}
32 </Text>
33 </View>
34 ))}
35 </View>
36 ))}
37 </View>
38 </ScrollView>
39 </ScrollView>
40 );
41}