Function SourceTable

website/app/components/tools/FileList.tsx:75–167

({
	sources,
	onRemove,
	disabled,
	expanded,
	onToggleExpanded,
}: SourceTableProps)

};

const SourceTable = ({
	sources,
	onRemove,
	disabled,
	expanded,
	onToggleExpanded,
}: SourceTableProps) => {
	const visibleSources = expanded
		? sources
		: sources.slice(0, SOURCE_PREVIEW_LIMIT);
	const hiddenCount = sources.length - SOURCE_PREVIEW_LIMIT;
	const duplicateFilenameLabels = buildDuplicateFilenameLabels(sources);

	return (
		<>
			<Table verticalSpacing="sm">
				<Table.Thead>
					<Table.Tr>
						<Table.Th>Filename</Table.Th>
						<Table.Th className={classes.secondaryColumn}>Format</Table.Th>
						<Table.Th className={classes.secondaryColumn}>Size</Table.Th>
						<Table.Th aria-label="Actions" />
					</Table.Tr>
				</Table.Thead>
				<Table.Tbody>
					{visibleSources.map((source) => {
						const identity = sourceIdentity(source);

						return (
							<Table.Tr key={source.id}>
								<Table.Td className={classes.filenameCell}>
									<Text fw={500}>{source.file.name}</Text>
									{identity && (
										<Text size="xs" mt={4} className={classes.supportingText}>
											{identity}
										</Text>
									)}
									<Text
										size="xs"
										mt={4}
										className={`${classes.mobileMetadata} ${classes.supportingText}`}
									>
										{sourceFormat(source.file.name)} ·{' '}
										{formatFileSize(source.file.size)}
									</Text>
									{source.error && (
										<Text size="xs" c="red" mt={4}>
											{source.error}
										</Text>
									)}
									{!source.inspection && !source.error && (
										<Text size="xs" mt={4} className={classes.supportingText}>
											Reading metadata…
										</Text>
									)}
								</Table.Td>
								<Table.Td className={classes.secondaryColumn}>
									{sourceFormat(source.file.name)}