20 | {/* Scrollable container */}
21 |
25 | {allCategories.map((category) => (
26 |
39 | ))}
40 |
41 |
18 |
25 |
26 |
27 | );
28 | }
--------------------------------------------------------------------------------
/src/components/MainLayout.tsx:
--------------------------------------------------------------------------------
1 | export default function MainLayout({ children }: { children: React.ReactNode }) {
2 | return (
3 |
4 |
5 | Cloud Security Tools
6 |
7 | {children}
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/SearchBar.tsx:
--------------------------------------------------------------------------------
1 | export default function SearchBar({
2 | searchQuery,
3 | setSearchQuery,
4 | }: {
5 | searchQuery: string;
6 | setSearchQuery: (query: string) => void;
7 | }) {
8 | return (
9 | setSearchQuery(e.target.value)}
14 | className="w-full borde border-gray-300 rounded-md p-2 bg-white text-black mt-4"
15 | />
16 | );
17 | }
--------------------------------------------------------------------------------
/src/components/SortControl.tsx:
--------------------------------------------------------------------------------
1 | import { Tool } from "../App";
2 |
3 | type SortControlProps = {
4 | sortKey: keyof Tool | "";
5 | setSortKey: (key: keyof Tool | "") => void;
6 | };
7 |
8 | export default function SortControl({ sortKey, setSortKey }: SortControlProps) {
9 | return (
10 |
35 | );
36 | }
--------------------------------------------------------------------------------
/src/components/StatsModal.tsx:
--------------------------------------------------------------------------------
1 | import { Pie } from "react-chartjs-2";
2 | import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
3 | import { Tool } from "../App";
4 | import { AiOutlineClose } from "react-icons/ai";
5 |
6 | // Register required elements for Chart.js
7 | ChartJS.register(ArcElement, Tooltip, Legend);
8 |
9 | type StatsModalProps = {
10 | isOpen: boolean;
11 | onRequestClose: () => void;
12 | tools: Tool[];
13 | };
14 |
15 | const LANGUAGE_COLORS: Record = {
16 | JavaScript: "#F7DF1E",
17 | Python: "#3776AB",
18 | Go: "#00ADD8",
19 | "C++": "#00599C",
20 | Rust: "#DEA584",
21 | Java: "#F89820",
22 | TypeScript: "#3178C6",
23 | PHP: "#8892BF",
24 | HTML: "#E34F26",
25 | CSS: "#264DE4",
26 | Shell: "#89E051",
27 | Ruby: "#701516",
28 | Unknown: "#BDC3C7",
29 | };
30 |
31 | const StatsModal = ({ isOpen, onRequestClose, tools }: StatsModalProps) => {
32 | if (!isOpen) return null;
33 |
34 | const languageCounts = tools.reduce((acc: Record, tool) => {
35 | if (tool.language) {
36 | acc[tool.language] = (acc[tool.language] || 0) + 1;
37 | } else {
38 | acc["Unknown"] = (acc["Unknown"] || 0) + 1;
39 | }
40 | return acc;
41 | }, {});
42 |
43 | const sortedLanguages = Object.entries(languageCounts)
44 | .sort(([, a], [, b]) => b - a)
45 | .slice(0, 10);
46 |
47 | const othersCount = Object.entries(languageCounts)
48 | .sort(([, a], [, b]) => b - a)
49 | .slice(10)
50 | .reduce((acc, [, count]) => acc + count, 0);
51 |
52 | const languageLabels = [...sortedLanguages.map(([lang]) => lang), "Others"];
53 | const languageData = [
54 | ...sortedLanguages.map(([, count]) => count),
55 | othersCount,
56 | ];
57 |
58 | const languageBackgroundColor = languageLabels.map(
59 | (lang, index) => LANGUAGE_COLORS[lang] || `hsl(${index * 36}, 70%, 50%)`
60 | );
61 |
62 | const languageChartData = {
63 | labels: languageLabels.map(
64 | (lang, index) =>
65 | `${lang} - ${
66 | index === languageLabels.length - 1
67 | ? othersCount
68 | : sortedLanguages[index][1]
69 | }`
70 | ),
71 | datasets: [
72 | {
73 | data: languageData,
74 | backgroundColor: languageBackgroundColor,
75 | hoverBackgroundColor: languageBackgroundColor,
76 | },
77 | ],
78 | };
79 |
80 | const totalTools = tools.length;
81 |
82 | return (
83 |
87 |
e.stopPropagation()}
90 | >
91 |
98 |
Tool Statistics
99 |
100 |
101 |
Total Tool Count: {totalTools}
102 |
103 |
104 |
105 |
Languages
106 |
109 |
110 |
111 |
112 |
{tool.name}
90 |
91 |
92 |
93 | {tool.stars}
94 |
95 |
96 | {tool.language}
97 | {languageIcons[tool.language] && (
98 | {languageIcons[tool.language]}
99 | )}
100 |
101 |
104 |
109 | {badgeText}
110 |
111 |
112 |
113 | {tool.description}
114 |
115 | {/* Tags Section */}
116 |
117 | {tool.tags.map((tag) => (
118 |
122 | {tag}
123 |
124 | ))}
125 |
126 |
127 | );
128 | }
129 |
--------------------------------------------------------------------------------
/src/components/ToolList.tsx:
--------------------------------------------------------------------------------
1 | import { Tool } from "../App";
2 | import ToolCard from "./ToolCard";
3 |
4 | type ToolListProps = {
5 | tools: Tool[];
6 | };
7 |
8 | export default function ToolList({ tools }: ToolListProps) {
9 | return (
10 |
11 | {tools.length > 0 ? (
12 | tools.map((tool) => (
13 |
14 | ))
15 | ) : (
16 |
17 |
No results found. Try adjusting your search.
18 |
19 | )}
20 |