52 lines · 1.6 KB
import { useState } from "react";
import { CodeFile } from "../CodeFile";
import { Button } from "~/ui/Button";
import { CsvTable } from "./CsvTable";
import { NotebookView } from "./NotebookView";
import { SvgPreview } from "./SvgPreview";
import type { Notebook } from "~/lib/code-intel";

type Kind = "csv" | "tsv" | "svg" | "notebook";

export function richKind(path: string, hasNotebook: boolean): Kind | null {
  const lower = path.toLowerCase();
  if (lower.endsWith(".csv")) return "csv";
  if (lower.endsWith(".tsv")) return "tsv";
  if (lower.endsWith(".svg")) return "svg";
  if (lower.endsWith(".ipynb") && hasNotebook) return "notebook";
  return null;
}

/** Preview for notebooks, delimited tables and SVG, with a toggle back to the highlighted source. */
export function RichBlob({
  kind,
  name,
  contents,
  notebook,
}: {
  kind: Kind;
  name: string;
  contents: string;
  notebook: Notebook | null;
}) {
  const [showSource, setShowSource] = useState(false);
  return (
    <div>
      <div className="flex justify-end border-b border-kumo-hairline px-3 py-1.5">
        <Button size="sm" variant="ghost" onClick={() => setShowSource((value) => !value)}>
          {showSource ? "Preview" : "Source"}
        </Button>
      </div>
      {showSource ? (