"use client" import React from "react" import { useSearchParams } from "next/navigation" import { useUpdateQueryStringValueWithoutNavigation } from "@/hooks" import { TPost, TPosts } from "@/types" import { useInView } from "framer-motion" import { PostsList } from "./posts-list" import { SearchBar } from "./search-bar" import { TagsSelect } from "./tags-select" interface PostsExplorerProps { posts: TPosts tags: string[] } export const PostsExplorer = (props: PostsExplorerProps) => { const { posts, tags } = props const searchParams = useSearchParams() const loadMoreRef = React.useRef(null) const inView = useInView(loadMoreRef) const [numberDisplayedPosts, setNumberDisplayedPosts] = React.useState(30) const initialSearchValue = searchParams.get("q") ?? "" const initialTags = searchParams .get("tags") ?.split(",") .filter((elem) => elem !== "") ?? [] const [searchValue, setSearchValue] = React.useState(initialSearchValue) const [selectedTags, setSelectedTags] = React.useState(initialTags) useUpdateQueryStringValueWithoutNavigation("q", searchValue.trim()) useUpdateQueryStringValueWithoutNavigation("tags", selectedTags.join(",")) const handleTagClick = (tag: string) => { const selected = selectedTags.findIndex((elem) => elem === tag) > -1 if (selected) { setSelectedTags(selectedTags.filter((elem) => elem !== tag)) } else { setSelectedTags([...selectedTags, tag]) } } const filteredPosts = React.useMemo(() => { return posts.filter((post: TPost) => { let matchesSearch = post.title .toLocaleLowerCase() .includes(searchValue.toLocaleLowerCase()) let matchesTags = post.tags ? post.tags.some((tag) => selectedTags.includes(tag)) : false if (selectedTags.length === 0) matchesTags = true if (searchValue === "") matchesSearch = true return matchesSearch && matchesTags }) }, [posts, searchValue, selectedTags]) React.useEffect(() => { if (inView) { setNumberDisplayedPosts((prevN) => prevN + 20) } }, [inView]) return (

setSearchValue(event.currentTarget.value)} />

Search blog by topics

{filteredPosts && ( )}

) }

How i made my blog using Next.js and Notion as a CMS