File size: 2,617 Bytes
3bb377e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
"use client";
import { Button } from "@/components/ui/button";
import { Braces, Copy, RotateCcw } from "lucide-react";
import { useState } from "react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
interface ResultDisplayProps {
result: string;
schema: string;
onReset: () => void;
}
export function ResultDisplay({ result, schema, onReset }: ResultDisplayProps) {
const [copied, setCopied] = useState(false);
const [schemaCopied, setSchemaCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(JSON.stringify(result, null, 2));
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
const handleSchemaCopy = () => {
navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
setSchemaCopied(true);
setTimeout(() => setSchemaCopied(false), 2000);
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold">Extracted Data</h2>
<div className="space-x-2">
<Popover>
<PopoverTrigger>
<Button variant="outline" size="sm">
<Braces className="w-4 h-4 mr-2" />
Schema
</Button>
</PopoverTrigger>
<PopoverContent className="max-h-[500px] max-w-[700px] w-full overflow-y-auto">
<div className="relative p-4 rounded-lg bg-muted">
<Button
variant="secondary"
size="sm"
onClick={handleSchemaCopy}
className="absolute top-2 right-2"
>
<Copy className="w-4 h-4 mr-2" />
{schemaCopied ? "Copied!" : "Copy"}
</Button>
<pre className="overflow-auto">
<code className="text-xs">
{JSON.stringify(schema, null, 2)}
</code>
</pre>
</div>
</PopoverContent>
</Popover>
<Button variant="outline" size="sm" onClick={handleCopy}>
<Copy className="w-4 h-4 mr-2" />
{copied ? "Copied!" : "Copy"}
</Button>
<Button variant="outline" size="sm" onClick={onReset}>
<RotateCcw className="w-4 h-4 mr-2" />
Process Another PDF
</Button>
</div>
</div>
<pre className="p-4 rounded-lg bg-muted overflow-auto">
<code className="text-sm">{JSON.stringify(result, null, 2)}</code>
</pre>
</div>
);
}
|