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 ( + + ); +}