39 lines
1.0 KiB
TypeScript
Executable File
39 lines
1.0 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import { Database, ReceiptText } from "lucide-react";
|
|
import { useMemo, useState } from "react";
|
|
import { CopyButton } from "@/app/(ui)/artifact/admin/[id]/client";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export function DataViewer({
|
|
entryYaml,
|
|
slipYaml,
|
|
}: {
|
|
entryYaml: string;
|
|
slipYaml: string;
|
|
}) {
|
|
const [isSlip, setIsSlip] = useState(false);
|
|
|
|
const yaml = useMemo(
|
|
() => (isSlip ? slipYaml : entryYaml),
|
|
[entryYaml, isSlip, slipYaml],
|
|
);
|
|
|
|
return (
|
|
<div className="relative max-h-[60svh] overflow-auto rounded-xl border bg-black/40 p-4 text-xs font-mono leading-relaxed">
|
|
<div className="sticky -top-2 -mr-2 flex justify-end -mt-10">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setIsSlip((x) => !x)}
|
|
>
|
|
{isSlip ? <ReceiptText /> : <Database />}
|
|
</Button>
|
|
<CopyButton text={yaml} />
|
|
</div>
|
|
|
|
<pre className="whitespace-pre-wrap wrap-break-word">{yaml}</pre>
|
|
</div>
|
|
);
|
|
}
|