85 lines
3.9 KiB
TypeScript
85 lines
3.9 KiB
TypeScript
import type { versionInfo } from "../../types/types";
|
|
import ModalComponent from "./ModalComponent";
|
|
|
|
type VersionsModalProps = {
|
|
isDevModalOpen: boolean;
|
|
handleClose: () => void;
|
|
data: versionInfo;
|
|
};
|
|
|
|
const VersionsModal = ({ isDevModalOpen, handleClose, data }: VersionsModalProps) => {
|
|
const uiName = __APP_NAME__;
|
|
const uiVersion = __APP_VERSION__;
|
|
const commitID = __GIT_COMMIT__;
|
|
const commitTimeStamp = __GIT_TIMESTAMP__;
|
|
|
|
return (
|
|
<ModalComponent isModalOpen={isDevModalOpen} close={handleClose}>
|
|
<div className="flex justify-end overflow-auto">
|
|
<button
|
|
onClick={handleClose}
|
|
className="p-2 border border-gray-600 rounded-md text-gray-200 hover:bg-gray-700 transition"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
<div className="space-y-6 p-5">
|
|
<div className="border-b border-gray-600 pb-3">
|
|
<h2 className="text-2xl font-bold text-gray-100">System Information</h2>
|
|
<p className="text-sm text-gray-400 mt-1">Application version details</p>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Frontend (UI)</h3>
|
|
<div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
|
|
<div className="flex justify-between items-center border-b border-gray-700 pb-2">
|
|
<span className="text-gray-400 text-sm">Name</span>
|
|
<span className="text-gray-200 font-mono font-semibold">{uiName}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-gray-400 text-sm">Version</span>
|
|
<span className="text-gray-200 font-mono font-semibold">{uiVersion}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-gray-400 text-sm">Revision (Commit ID)</span>
|
|
<span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">{commitID}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-gray-400 text-sm">Build Time</span>
|
|
<span className="text-gray-200 font-mono text-sm">{commitTimeStamp}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Backend</h3>
|
|
<div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
|
|
<div className="flex justify-between items-center border-b border-gray-700 pb-2">
|
|
<span className="text-gray-400 text-sm"> Name</span>
|
|
<span className="text-gray-200 font-mono font-semibold">{data?.appname || "N/A"}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center pb-2">
|
|
<span className="text-gray-400 text-sm">Version</span>
|
|
<span className="text-gray-200 font-mono font-semibold">{data?.version || "N/A"}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center pb-2">
|
|
<span className="text-gray-400 text-sm">Revision (Commit ID)</span>
|
|
<span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">
|
|
{data?.revision || "N/A"}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center pb-2">
|
|
<span className="text-gray-400 text-sm">Build Time</span>
|
|
<span className="text-gray-200 font-mono text-sm">{data?.buildtime || "N/A"}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-gray-400 text-sm">MAC Address</span>
|
|
<span className="text-gray-200 font-mono text-sm">{data?.MAC || "N/A"}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ModalComponent>
|
|
);
|
|
};
|
|
|
|
export default VersionsModal;
|