diff --git a/src/components/CategoryNavItem.jsx b/src/components/CategoryNavItem.jsx
index 0ad99f2..527028b 100644
--- a/src/components/CategoryNavItem.jsx
+++ b/src/components/CategoryNavItem.jsx
@@ -1,26 +1,42 @@
-import { useState, useEffect, useCallback } from "react";
+import { navigate } from "astro:transitions/client";
+import { useState, useEffect } from "react";
+import data from "../data/tools.json";
import "./CategoryNavItem.css";
export default function CategoryNavItem(props) {
- const { title, category, filter, setFilter } = props;
- const [isActive, setIsActive] = useState(false);
-
- useEffect(() => {
- let subscription = true;
+ const { title, category, filter } = props;
+ const [isActive, setIsActive] = useState(false);
- if (filter === category) {
- setIsActive(true);
- } else {
- setIsActive(false);
- }
+ const getCategoryCount = () => {
+ if (category === "all") {
+ return data.tools.reduce((acc, item) => acc + item.content.length, 0);
+ }
- return (() => (subscription = !subscription));
- }, [filter]);
+ const navItemData = data.tools.filter((item) => item.category === category);
+ return navItemData[0]?.content.length;
+ };
- return
-}
\ No newline at end of file
+ useEffect(() => {
+ let subscription = true;
+
+ if (filter === category) {
+ setIsActive(true);
+ } else {
+ setIsActive(false);
+ }
+
+ return () => (subscription = !subscription);
+ }, [filter]);
+
+ return (
+
+ );
+}