Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 80 81 82 83 84 85 86 87 88 89 90 91 | 43x 43x 43x 43x | import { useState } from "react";
import { Maximize2, X,CircleX } from "lucide-react";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import {
AlertDialog,
AlertDialogContent,
AlertDialogHeader,
} from "@/ahuora-design-system/ui/alert-dialog";
import DataViewer from "../../../multi-steady-state/DataViewer";
import { Separator } from "@/ahuora-design-system/ui/separator";
export function PreviewData({
hasFile,
onRemove,
fileName,
optimization,
}: {
hasFile: boolean;
onRemove: () => void;
fileName: string;
optimization: { id: number };
}) {
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
const handleOpen = () => setIsPreviewOpen(true);
const handleClose = () => setIsPreviewOpen(false);
return (
<>
<div className="flex items-center px-2 py-1 bg-secondary rounded-full gap-2 ">
{!hasFile ? (
<span className="text-sm truncate select-none">No File Chosen</span>
) : (
<>
<button
className="text-sm truncate bg-transparent border-0 p-0 cursor-pointer hover:text-primary focus:outline-none"
style={{ textDecoration: "none" }}
onClick={handleOpen}
type="button"
aria-label="Preview file data"
tabIndex={0}
>
{fileName}
</button>
<ToolTipCover content="Maximise" asChild>
<Maximize2
size={17}
className="cursor-pointer hover:stroke-zinc-400"
onClick={handleOpen}
/>
</ToolTipCover>
<ToolTipCover content="Remove file" asChild>
<X
size={18}
className="cursor-pointer hover:stroke-rose-700"
onClick={onRemove}
/>
</ToolTipCover>
</>
)}
</div>
{hasFile && (
<AlertDialog open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
<AlertDialogContent className="relative flex flex-col justify-between p-6">
<AlertDialogHeader>
<div className="flex items-center justify-between pb-4">
<h3 className="text-base font-semibold truncate max-w-[90%]">
Preview
</h3>
<button
onClick={handleClose}
className="text-muted-foreground hover:text-foreground transition"
aria-label="close-file-viewer"
>
<X size={18} />
</button>
</div>
</AlertDialogHeader>
<div className="max-h-[60vh] max-w-[70vw]">
<DataViewer scenario={optimization.id} />
</div>
</AlertDialogContent>
</AlertDialog>
)}
</>
);
}
|