import { Box, HStack, Tab, TabList, TabPanel, TabPanels, Tabs, Text, useColorModeValue, } from "@chakra-ui/react"; import { JSONTree } from "react-json-tree"; import { APPLICATION_JSON, EXCEL_MIME_TYPE, SPREADHSEET_MIME_TYPE, TEXT_CSV, } from "../cell/output/mimeTypes"; import Spinner from "../misc/Spinner"; import CrazyTable from "../modals/file-view/CrazyTable"; export interface TransformData { columns: string[]; rows: any[][]; } export interface TableState { data: Record[]; columns: string[]; } export interface ExcelPreviewState { [sheetName: string]: TableState; } export type JsonPreviewState = string; export type PreviewData = { type: string; data?: TableState | ExcelPreviewState | JsonPreviewState; }; const RenderCSVData = ({ previewData }: { previewData: TableState }) => { return ; }; const RenderJSONData = ({ previewData }: { previewData: JsonPreviewState }) => { const theme = useColorModeValue( { scheme: "monokai", base00: "var(--chakra-colors-chakra-body-bg)", }, { base00: "var(--chakra-colors-chakra-body-bg)", base01: "#383c4a", base02: "#4b5363", base03: "#646e82", base04: "#b2bcc9", base05: "#e5e9f0", base06: "#eff1f5", base07: "#abb2bf", base08: "#e06c75", base09: "#d19a66", base0A: "#e5c07b", base0B: "#98c379", base0C: "#56b6c2", base0D: "#61afef", base0E: "#c678dd", base0F: "#be5046", }, ); return ( Previewing structure of JSON file. ); }; const RenderExcelData = ({ previewData, height = "500px", }: { previewData: ExcelPreviewState; height?: string; }) => { return ( {Object.entries(previewData).map( ([sheetName, sheetData], index) => ( ), )} {Object.keys(previewData).map((sheetName, index) => ( {sheetName} ))} ); }; export const FilePreview = ({ previewData }: { previewData: PreviewData }) => { if (!previewData) { return ( Loading file... ); } const couldNotGeneratePreview = ( Could not generate a preview for this file ); if (previewData && !previewData.data) { return couldNotGeneratePreview; } switch (previewData.type) { case TEXT_CSV: return ( ); case APPLICATION_JSON: return ( ); case SPREADHSEET_MIME_TYPE: case EXCEL_MIME_TYPE: return ( ); default: return couldNotGeneratePreview; } };