diff --git a/components/ScriptBrowser.tsx b/components/ScriptBrowser.tsx index e9c2f5a..3914643 100644 --- a/components/ScriptBrowser.tsx +++ b/components/ScriptBrowser.tsx @@ -16,6 +16,7 @@ const ScriptBrowser = ({ items }: { items: Category[] }) => { const [links, setLinks] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const inputRef = useRef(null); + const [expandedItems, setExpandedItems] = useState([]); useEffect(() => { if (items) { @@ -49,6 +50,34 @@ const ScriptBrowser = ({ items }: { items: Category[] }) => { ); }, [links, searchTerm]); + useEffect(() => { + if (searchTerm) { + const expanded = filteredLinks.map((category) => category.catagoryName); + setExpandedItems(expanded); + } else { + setExpandedItems([]); + } + }, [searchTerm, filteredLinks]); + + const handleAccordionChange = (value: string[]) => { + setExpandedItems(value); + }; + + const accordionProps = useMemo(() => { + return searchTerm + ? { + type: "multiple" as const, + value: expandedItems, + onValueChange: handleAccordionChange, + } + : { + type: "single" as const, + collapsible: true, + value: expandedItems[0], + onValueChange: (value: string) => handleAccordionChange([value]), + }; + }, [searchTerm, expandedItems]); + return (

Scripts

@@ -59,15 +88,17 @@ const ScriptBrowser = ({ items }: { items: Category[] }) => { onChange={(e) => handleSearch(e.target.value)} ref={inputRef} /> - + {filteredLinks.map((category) => ( {category.catagoryName} - + {category.expand.items .filter((script) => script.title.toLowerCase().includes(searchTerm.toLowerCase()), @@ -107,4 +138,4 @@ const ScriptBrowser = ({ items }: { items: Category[] }) => { ); }; -export default ScriptBrowser; +export default ScriptBrowser; \ No newline at end of file