ui Architecture Docs
Home / File/ breadcrumb-rtl.tsx — ui Source File

breadcrumb-rtl.tsx — ui Source File

Architecture documentation for breadcrumb-rtl.tsx, a tsx file in the ui codebase. 5 imports, 0 dependents.

File tsx DocumentationAtlas SearchAPI 5 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  3d9bcd16_5aef_e4f5_9d1c_1b47432d7143["breadcrumb-rtl.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  3d9bcd16_5aef_e4f5_9d1c_1b47432d7143 --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  969b3740_36a9_d4e5_d40d_4d9cfd70a7ea["breadcrumb"]
  3d9bcd16_5aef_e4f5_9d1c_1b47432d7143 --> 969b3740_36a9_d4e5_d40d_4d9cfd70a7ea
  bad3ab01_8dbf_3560_d05f_3d66daedd204["dropdown-menu"]
  3d9bcd16_5aef_e4f5_9d1c_1b47432d7143 --> bad3ab01_8dbf_3560_d05f_3d66daedd204
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  3d9bcd16_5aef_e4f5_9d1c_1b47432d7143 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  2c1404ab_bf28_6225_f9a0_b9e29400c66c["language-selector"]
  3d9bcd16_5aef_e4f5_9d1c_1b47432d7143 --> 2c1404ab_bf28_6225_f9a0_b9e29400c66c
  style 3d9bcd16_5aef_e4f5_9d1c_1b47432d7143 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import Link from "next/link"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/examples/base/ui-rtl/breadcrumb"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/examples/base/ui-rtl/dropdown-menu"
import { ChevronDownIcon, DotIcon } from "lucide-react"

import {
  useTranslation,
  type Translations,
} from "@/components/language-selector"

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      home: "Home",
      components: "Components",
      documentation: "Documentation",
      themes: "Themes",
      github: "GitHub",
      breadcrumb: "Breadcrumb",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      home: "الرئيسية",
      components: "المكونات",
      documentation: "التوثيق",
      themes: "السمات",
      github: "جيت هاب",
      breadcrumb: "مسار التنقل",
    },
  },
  he: {
    dir: "rtl",
    values: {
      home: "בית",
      components: "רכיבים",
      documentation: "תיעוד",
      themes: "ערכות נושא",
      github: "גיטהאב",
      breadcrumb: "פירורי לחם",
    },
  },
}

export function BreadcrumbRtl() {
  const { dir, t, language } = useTranslation(translations, "ar")

  return (
    <Breadcrumb dir={dir}>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/" />}>{t.home}</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <DotIcon />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={<button className="flex items-center gap-1" />}
            >
              {t.components}
              <ChevronDownIcon data-icon="inline-end" className="size-3.5" />
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align={dir === "rtl" ? "end" : "start"}
              data-lang={dir === "rtl" ? language : undefined}
              dir={dir}
            >
              <DropdownMenuGroup>
                <DropdownMenuItem>{t.documentation}</DropdownMenuItem>
                <DropdownMenuItem>{t.themes}</DropdownMenuItem>
                <DropdownMenuItem>{t.github}</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <DotIcon />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>{t.breadcrumb}</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Domain

Subdomains

Functions

Dependencies

  • breadcrumb
  • dropdown-menu
  • language-selector
  • link
  • lucide-react

Source

Frequently Asked Questions

What does breadcrumb-rtl.tsx do?
breadcrumb-rtl.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in breadcrumb-rtl.tsx?
breadcrumb-rtl.tsx defines 1 function(s): BreadcrumbRtl.
What does breadcrumb-rtl.tsx depend on?
breadcrumb-rtl.tsx imports 5 module(s): breadcrumb, dropdown-menu, language-selector, link, lucide-react.
Where is breadcrumb-rtl.tsx in the architecture?
breadcrumb-rtl.tsx is located at apps/v4/examples/base/breadcrumb-rtl.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/base).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free