[V0_FILE]typescriptreact:file="components/app-sidebar.tsx" source="https://ui.shadcn.com/blocks/sidebar" import * as React from "react" import { SearchForm } from "./search-form" import { VersionSwitcher } from "./version-switcher" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, } from "@/components/ui/sidebar" // This is sample data. const data = { versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"], navMain: [ { title: "Getting Started", url: "#", items: [ { title: "Installation", url: "#", }, { title: "Project Structure", url: "#", }, ], }, { title: "Building Your Application", url: "#", items: [ { title: "Routing", url: "#", }, { title: "Data Fetching", url: "#", isActive: true, }, { title: "Rendering", url: "#", }, { title: "Caching", url: "#", }, { title: "Styling", url: "#", }, { title: "Optimizing", url: "#", }, { title: "Configuring", url: "#", }, { title: "Testing", url: "#", }, { title: "Authentication", url: "#", }, { title: "Deploying", url: "#", }, { title: "Upgrading", url: "#", }, { title: "Examples", url: "#", }, ], }, { title: "API Reference", url: "#", items: [ { title: "Components", url: "#", }, { title: "File Conventions", url: "#", }, { title: "Functions", url: "#", }, { title: "next.config.js Options", url: "#", }, { title: "CLI", url: "#", }, { title: "Edge Runtime", url: "#", }, ], }, { title: "Architecture", url: "#", items: [ { title: "Accessibility", url: "#", }, { title: "Fast Refresh", url: "#", }, { title: "Next.js Compiler", url: "#", }, { title: "Supported Browsers", url: "#", }, { title: "Turbopack", url: "#", }, ], }, ], } export function AppSidebar({ ...props }: React.ComponentProps) { return ( {/* We create a SidebarGroup for each parent. */} {data.navMain.map((item) => ( {item.title} {item.items.map((item) => ( {item.title} ))} ))} ) } [V0_FILE]typescriptreact:file="components/search-form.tsx" source="https://ui.shadcn.com/blocks/sidebar" import { Search } from "lucide-react" import { Label } from "@/components/ui/label" import { SidebarGroup, SidebarGroupContent, SidebarInput, } from "@/components/ui/sidebar" export function SearchForm({ ...props }: React.ComponentProps<"form">) { return ( ) } [V0_FILE]typescriptreact:file="components/version-switcher.tsx" source="https://ui.shadcn.com/blocks/sidebar" "use client" import * as React from "react" import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export function VersionSwitcher({ versions, defaultVersion, }: { versions: string[] defaultVersion: string }) { const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion) return (

Documentation v{selectedVersion}

{versions.map((version) => ( setSelectedVersion(version)} > v{version}{" "} {version === selectedVersion && } ))} ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" source="https://ui.shadcn.com/blocks/sidebar" import { AppSidebar } from "../../components/app-sidebar" import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb" import { Separator } from "@/components/ui/separator" import { SidebarInset, SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar" export default function Page() { return (

Building Your Application Data Fetching

) }

About

Tags

Share

More from aryamank

More Templates Like This

About

Tags

Share

About

Tags

Share

More from aryamank

More Templates Like This