import * as React from "react"; import { FiltersBarContentLibraryFive } from "@/registry/filters-bar-content-library-five/filters-bar-content-library-five"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof FiltersBarContentLibraryFive >; type FiltersBarContentLibraryFiveSelection = Parameters< NonNullable >[0]; const contentTypes: ComponentProps["contentTypes"] = [ { id: "guides", label: "Guides" }, { id: "webinars", label: "Webinars" }, { id: "templates", label: "Templates" }, ]; const tags: ComponentProps["tags"] = [ { id: "product", label: "Product", count: 18 }, { id: "marketing", label: "Marketing", count: 26 }, { id: "sales", label: "Sales enablement", count: 12 }, { id: "design", label: "Design", count: 9 }, { id: "ops", label: "Operations", count: 7 }, ]; const sortOptions: ComponentProps["sortOptions"] = [ { id: "newest", label: "Newest first" }, { id: "popular", label: "Most popular" }, { id: "duration", label: "Shortest duration" }, ]; const facetGroups: NonNullable = [ { id: "difficulty", title: "Difficulty", options: [ { id: "beginner", label: "Beginner", count: 14 }, { id: "intermediate", label: "Intermediate", count: 19 }, { id: "advanced", label: "Advanced", count: 8 }, ], }, { id: "industry", title: "Industry", description: "Filter by target vertical", options: [ { id: "saas", label: "SaaS", count: 11 }, { id: "commerce", label: "Commerce", count: 9 }, { id: "health", label: "Healthcare", count: 5 }, ], }, { id: "format", title: "Format", options: [ { id: "pdf", label: "PDF", count: 16 }, { id: "video", label: "Video", count: 12 }, { id: "interactive", label: "Interactive", count: 6 }, ], }, ]; const savedViews: NonNullable = [ { id: "pm-onboarding", label: "PM onboarding", description: "Beginner guides and templates for new PMs", }, { id: "revops-kit", label: "RevOps playbook", description: "Revenue ops resources sorted by impact", }, ]; const initialFacets: FiltersBarContentLibraryFiveSelection = { difficulty: ["intermediate"], industry: ["saas"], format: [], }; export function FiltersBarContentLibraryFiveDemo() { const [search, setSearch] = React.useState("Generative AI"); const [contentType, setContentType] = React.useState( contentTypes[0]?.id ?? "guides", ); const [tagsSelection, setTagsSelection] = React.useState([ "product", "design", ]); const [sort, setSort] = React.useState( sortOptions[0]?.id ?? "newest", ); const [facets, setFacets] = React.useState(initialFacets); const [tokens, setTokens] = React.useState(["AI", "workflow"]); const handleTokenRemove = (token: string) => { setTokens((prev) => prev.filter((item) => item !== token)); }; return (

console.log("Load view", viewId)} />

Library state

Search: “{search}”

Content type: {contentType}

Sort: {sort}

Filters

Tags: {tagsSelection.join(", ") || "None"}

Facets:{" "} {Object.values(facets).reduce( (total: number, values: string[]) => total + values.length, 0, )}

Tokens: {tokens.join(", ") || "None"}

); } export default FiltersBarContentLibraryFiveDemo;

Simple