diff --git a/components/layout/search/filter/item.tsx b/components/layout/search/filter/item.tsx
index 847493eb2..86e24ad29 100644
--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@@ -13,6 +13,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
const searchParams = useSearchParams();
const [active, setActive] = useState(pathname === item.path);
const newParams = new URLSearchParams(searchParams.toString());
+ const DynamicTag = active ? 'p' : Link;
newParams.delete('q');
@@ -22,7 +23,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
return (
-
{item.title}
-
+
);
}
@@ -42,33 +43,30 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
const searchParams = useSearchParams();
const [active, setActive] = useState(searchParams.get('sort') === item.slug);
const q = searchParams.get('q');
+ const href = createUrl(
+ pathname,
+ new URLSearchParams({
+ ...(q && { q }),
+ ...(item.slug && item.slug.length && { sort: item.slug })
+ })
+ );
+ const DynamicTag = active ? 'p' : Link;
useEffect(() => {
setActive(searchParams.get('sort') === item.slug);
}, [searchParams, item.slug]);
- const href =
- item.slug && item.slug.length
- ? createUrl(
- pathname,
- new URLSearchParams({
- ...(q && { q }),
- sort: item.slug
- })
- )
- : pathname;
-
return (
-
{item.title}
-
+
);
}