import * as React from "react"; import { TabNavKnowledgeBaseFive } from "@/registry/tab-nav-knowledge-base-five/tab-nav-knowledge-base-five"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { BookOpenIcon, CodeIcon, FileTextIcon, RocketIcon } from "lucide-react"; 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 TabNavKnowledgeBaseFive >; type KBTabItem = NonNullable[number]; type RelatedResource = NonNullable[number]; const DEMO_TABS: KBTabItem[] = [ { id: "overview", label: "Overview", icon: BookOpenIcon, content: (

Getting Started with Our Platform

Welcome to our comprehensive guide. This documentation will help you understand the core concepts and get started quickly.

What you'll learn

Core platform concepts and architecture
How to set up your first project
Best practices for development
Common patterns and use cases

Prerequisites

Before you begin, make sure you have Node.js 18+ and npm installed on your system. Basic knowledge of JavaScript and React is recommended.

), offlineAvailable: true, }, { id: "api", label: "API Reference", icon: CodeIcon, hasUpdate: true, content: (

Authentication Secure your API requests with authentication tokens

              {`POST /api/v1/auth/login
{
  "email": "user@example.com",
  "password": "secure_password"
}`}

Get User Profile Retrieve authenticated user information

              {`GET /api/v1/user/profile
Headers:
  Authorization: Bearer {token}`}

), }, { id: "tutorials", label: "Tutorials", icon: FileTextIcon, content: (

{[ { title: "Build Your First App", description: "Step-by-step guide to creating your first application", duration: "15 min", }, { title: "Advanced Patterns", description: "Learn advanced development patterns and techniques", duration: "30 min", }, { title: "Deployment Guide", description: "Deploy your app to production with confidence", duration: "20 min", }, { title: "Performance Optimization", description: "Tips and tricks for optimizing your application", duration: "25 min", }, ].map((tutorial, idx) => ( {tutorial.title} {tutorial.description} {tutorial.duration} ))}

), }, { id: "changelog", label: "Release Notes", icon: RocketIcon, hasUpdate: true, content: (

Version 2.5.0 - Latest

Released on Jan 15, 2024

Added new dashboard analytics widgets
Improved API response times by 40%
Fixed issue with dark mode toggle
Enhanced mobile responsiveness

Version 2.4.0

Released on Dec 20, 2023

Introduced team collaboration features
Added export functionality for reports
Security improvements and bug fixes

), offlineAvailable: true, }, ]; const DEMO_RELATED_RESOURCES: RelatedResource[] = [ { id: "1", title: "Quick Start Guide", type: "guide", href: "#quick-start", description: "Get up and running in 5 minutes", }, { id: "2", title: "API Documentation", type: "api", href: "#api-docs", description: "Complete API reference", }, { id: "3", title: "Video Walkthrough", type: "video", href: "#video", description: "20-minute introduction video", }, { id: "4", title: "Best Practices", type: "article", href: "#best-practices", description: "Learn from the experts", }, { id: "5", title: "Migration Guide", type: "guide", href: "#migration", description: "Upgrade from v1 to v2", }, ]; const DEMO_BREADCRUMBS = [ { label: "Docs", href: "#docs" }, { label: "Getting Started", href: "#getting-started" }, { label: "Platform Overview" }, ]; export function TabNavKnowledgeBaseFiveDemo() { return (

Knowledge Base Context Tabs

Split product guidance across overview, API references, and changelog contexts with related resources sidebar.

); } export default TabNavKnowledgeBaseFiveDemo;

Simple