import * as React from "react"; import { TabNavContentHubTwo } from "@/registry/tab-nav-content-hub-two/tab-nav-content-hub-two"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { 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"; FileTextIcon, VideoIcon, HeadphonesIcon, BookOpenIcon, } from "lucide-react"; type ComponentProps = React.ComponentPropsWithoutRef< typeof TabNavContentHubTwo >; type ContentTabItem = NonNullable[number]; type FilterOption = NonNullable[number]; const DEMO_ARTICLES = [ { title: "Getting Started with Next.js 14", description: "Learn the fundamentals of building modern web applications", type: "Article", duration: "5 min read", tags: ["Tutorial", "Beginner"], }, { title: "Advanced React Patterns", description: "Master complex state management and component composition", type: "Guide", duration: "12 min read", tags: ["Advanced", "React"], }, { title: "Building Accessible UIs", description: "Best practices for creating inclusive user interfaces", type: "Article", duration: "8 min read", tags: ["Accessibility", "UI"], }, ]; const DEMO_TABS: ContentTabItem[] = [ { id: "articles", label: "Articles", count: 42, content: (

{DEMO_ARTICLES.map((article, idx) => (

{article.type}

{article.title} {article.description}

{article.duration}

{article.tags.map((tag) => ( {tag} ))}

))}

), }, { id: "guides", label: "Guides", count: 28, content: (

Comprehensive

Complete TypeScript Guide Everything you need to know about TypeScript in 2024 45 min read

Step-by-step

API Design Best Practices Build scalable and maintainable REST APIs 30 min read

), }, { id: "webinars", label: "Webinars", count: 15, content: (

{[1, 2, 3].map((idx) => (

Live

Webinar: Building at Scale Join our experts for a live discussion 60 min ))}

), }, { id: "podcasts", label: "Podcasts", count: 8, content: (

Latest Episode

The Future of Web Development Discussing emerging trends and technologies 45 min

), }, ]; const DEMO_FILTERS: FilterOption[] = [ { id: "tutorial", label: "Tutorials", group: "Tags" }, { id: "advanced", label: "Advanced", group: "Tags" }, { id: "beginner", label: "Beginner", group: "Tags" }, { id: "video", label: "Video", group: "Format" }, { id: "text", label: "Text", group: "Format" }, { id: "audio", label: "Audio", group: "Format" }, ]; export function TabNavContentHubTwoDemo() { const [searchQuery, setSearchQuery] = React.useState(""); const [activeFilters, setActiveFilters] = React.useState([]); return (

Content Hub Filter Tabs

Navigate editorial and resource libraries with integrated search and contextual filtering. Perfect for content hubs with multiple verticals.

{(searchQuery || activeFilters.length > 0) && ( Active Search & Filters {searchQuery && (

Search: "{searchQuery}"

)} {activeFilters.length > 0 && (

Filters:

{activeFilters.map((filterId) => ( {DEMO_FILTERS.find((f) => f.id === filterId)?.label} ))}

)} )}

); } export default TabNavContentHubTwoDemo;

Simple