File size: 2,199 Bytes
88c4c60 | 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 | "use client";
import { useState, useEffect } from "react";
import { CardSkeleton } from "@/shared/components";
import { CLI_TOOLS, MITM_TOOLS } from "@/shared/constants/cliTools";
import { MitmLinkCard } from "./components";
import ToolSummaryCard from "./components/ToolSummaryCard";
const ALL_STATUSES_URL = "/api/cli-tools/all-statuses";
export default function CLIToolsPageClient({ machineId }) {
const [loading, setLoading] = useState(true);
const [toolStatuses, setToolStatuses] = useState({});
useEffect(() => {
let mounted = true;
(async () => {
try {
const res = await fetch(ALL_STATUSES_URL);
if (res.ok && mounted) setToolStatuses(await res.json());
} catch (error) {
console.log("Error fetching tool statuses:", error);
} finally {
if (mounted) setLoading(false);
}
})();
return () => { mounted = false; };
}, []);
if (loading) {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
</div>
);
}
const regularTools = Object.entries(CLI_TOOLS);
const mitmTools = Object.entries(MITM_TOOLS);
return (
<div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-1 sm:px-0">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
{regularTools.map(([toolId, tool]) => (
<ToolSummaryCard key={toolId} toolId={toolId} tool={tool} status={toolStatuses[toolId]} />
))}
</div>
<div className="flex flex-col gap-3 sm:gap-4">
<div className="flex items-center gap-2 px-1">
<span className="material-symbols-outlined text-[18px] text-primary">security</span>
<h2 className="text-sm font-semibold text-text-main">MITM Tools</h2>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
{mitmTools.map(([toolId, tool]) => (
<MitmLinkCard key={toolId} tool={tool} />
))}
</div>
</div>
</div>
);
}
|