"use client"
import * as React from "react"
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
function demoNavClick(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault()
}
export default function BreadcrumbDropdown() {
return (
<div
dir="rtl"
lang="fa"
className="flex min-h-svh items-center justify-center bg-background px-6"
>
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#" onClick={demoNavClick}>
خانه
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
variant="ghost"
size="icon-sm"
className="size-auto px-1"
aria-label="مسیرهای میانی"
/>
}
>
<BreadcrumbEllipsis />
</DropdownMenuTrigger>
<DropdownMenuContent align="start" dir="rtl" lang="fa">
<DropdownMenuItem>مستندات</DropdownMenuItem>
<DropdownMenuItem>کامپوننتها</DropdownMenuItem>
<DropdownMenuItem>فرمها</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#" onClick={demoNavClick}>
دکمه
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>نمونهها</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
)
}