handleChipClick(chip.name)}>
{
const [categories, setCategories] =
useState(allCategoriesArray);
const [selectedCategories, setSelectedCategories] = useState([]);
- const [showCoreFeaturesHeader, setShowCoreFeaturesHeader] = useState(true);
- const [showOtherPluginsHeader, setShowOtherPluginsHeader] = useState(true);
+ const [showCoreFeatures, setShowCoreFeatures] = useState(true);
+ const [showOtherPlugins, setShowOtherPlugins] = useState(true);
const handleChipClick = (categoryName: string) => {
const isSelected =
@@ -67,23 +67,23 @@ const Plugins = () => {
setCategories(newCategories);
if (!newSelectedCategories.includes('Core Feature')) {
- setShowCoreFeaturesHeader(false);
+ setShowCoreFeatures(false);
} else {
- setShowCoreFeaturesHeader(true);
+ setShowCoreFeatures(true);
}
if (
newSelectedCategories.length === 1 &&
newSelectedCategories[0] === 'Core Feature'
) {
- setShowOtherPluginsHeader(false);
+ setShowOtherPlugins(false);
} else {
- setShowOtherPluginsHeader(true);
+ setShowOtherPlugins(true);
}
if (newSelectedCategories.length === 0) {
- setShowOtherPluginsHeader(true);
- setShowCoreFeaturesHeader(true);
+ setShowOtherPlugins(true);
+ setShowCoreFeatures(true);
}
};
@@ -118,33 +118,45 @@ const Plugins = () => {
/>
- {showCoreFeaturesHeader && Core Features
}
+ {showCoreFeatures && (
+
+
Core Features
+
+ {plugins.corePlugins
+ .filter(
+ pluginData =>
+ !selectedCategories.length ||
+ selectedCategories.includes(pluginData.category),
+ )
+ .map(pluginData => (
+
+ ))}
+
+
+ )}
-
- {plugins.corePlugins
- .filter(
- pluginData =>
- !selectedCategories.length ||
- selectedCategories.includes(pluginData.category),
- )
- .map(pluginData => (
-
- ))}
-
-
- {showOtherPluginsHeader && All Plugins
}
-
-
- {plugins.otherPlugins
- .filter(
- pluginData =>
- !selectedCategories.length ||
- selectedCategories.includes(pluginData.category),
- )
- .map(pluginData => (
-
- ))}
-
+ {showOtherPlugins && (
+
+
All Plugins
+
+ {plugins.otherPlugins
+ .filter(
+ pluginData =>
+ !selectedCategories.length ||
+ selectedCategories.includes(pluginData.category),
+ )
+ .map(pluginData => (
+
+ ))}
+
+
+ )}
);
diff --git a/microsite/src/pages/plugins/plugins.module.scss b/microsite/src/pages/plugins/plugins.module.scss
index 3babf0959c..d5ea5de6e7 100644
--- a/microsite/src/pages/plugins/plugins.module.scss
+++ b/microsite/src/pages/plugins/plugins.module.scss
@@ -37,6 +37,10 @@
}
}
+ :global(.hidePluginsHeader) {
+ display: none;
+ }
+
:global(.fit-content) {
width: fit-content;
}