diff --git a/client/src/containers/sidebar/explore-sidebar/index.tsx b/client/src/containers/sidebar/explore-sidebar/index.tsx index 7052ad8b..896ac4d9 100644 --- a/client/src/containers/sidebar/explore-sidebar/index.tsx +++ b/client/src/containers/sidebar/explore-sidebar/index.tsx @@ -3,6 +3,7 @@ import { FC } from "react"; import useFilters from "@/hooks/use-filters"; import FilterSettings from "@/containers/sidebar/filter-settings"; +import ClearFiltersButton from "@/containers/sidebar/filter-settings/clear-filters-button"; import SectionsNav from "@/containers/sidebar/sections-nav"; import { @@ -23,7 +24,10 @@ const ExploreSidebar: FC = () => { defaultValue={["explore-sections"]} > - Filters +
+ Filters + +
{ + const { filters, setFilters } = useFilters(); + + if (filters.length === 0) return null; + + return ( + + ); +}; + +export default ClearFiltersButton; diff --git a/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx b/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx index b0d9c3a8..d7a388a5 100644 --- a/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx +++ b/client/src/containers/sidebar/filter-settings/filter-popup/index.tsx @@ -2,6 +2,7 @@ import { FC, useState } from "react"; import { PageFilter } from "@shared/dto/widgets/page-filter.entity"; import { useSetAtom } from "jotai"; +import { CircleXIcon } from "lucide-react"; import { FilterQueryParam } from "@/hooks/use-filters"; @@ -35,18 +36,16 @@ const FilterItemButton: FC<{ onClick: (value: string) => void; }> = ({ value, onClick }) => { return ( - <> + {value}  - { e.stopPropagation(); onClick(value); }} - > - x - - + /> + ); }; diff --git a/client/src/containers/sidebar/sandbox-sidebar/index.tsx b/client/src/containers/sidebar/sandbox-sidebar/index.tsx index 07b40202..13604725 100644 --- a/client/src/containers/sidebar/sandbox-sidebar/index.tsx +++ b/client/src/containers/sidebar/sandbox-sidebar/index.tsx @@ -4,6 +4,7 @@ import useFilters from "@/hooks/use-filters"; import useSandboxWidget from "@/hooks/use-sandbox-widget"; import FilterSettings from "@/containers/sidebar/filter-settings"; +import ClearFiltersButton from "@/containers/sidebar/filter-settings/clear-filters-button"; import IndicatorSelector from "@/containers/sidebar/indicator-seletor"; import VisualizationSelector from "@/containers/sidebar/visualization-selector"; @@ -47,7 +48,10 @@ const SandboxSidebar: FC = () => {
- Filters +
+ Filters + +
{
- Filters +
+ Filters + +