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. 6 imports, 0 dependents.

File tsx DocumentationAtlas SearchAPI 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  9c7f13b7_8449_6563_16de_999ef83dd1ae["breadcrumb-rtl.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  9c7f13b7_8449_6563_16de_999ef83dd1ae --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  9c7f13b7_8449_6563_16de_999ef83dd1ae --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  73ba82f7_4282_7bd3_d606_2557040c283e["breadcrumb"]
  9c7f13b7_8449_6563_16de_999ef83dd1ae --> 73ba82f7_4282_7bd3_d606_2557040c283e
  64cf5fc8_5f85_b97f_51fc_2fe1ed695972["dropdown-menu"]
  9c7f13b7_8449_6563_16de_999ef83dd1ae --> 64cf5fc8_5f85_b97f_51fc_2fe1ed695972
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  9c7f13b7_8449_6563_16de_999ef83dd1ae --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  2c1404ab_bf28_6225_f9a0_b9e29400c66c["language-selector"]
  9c7f13b7_8449_6563_16de_999ef83dd1ae --> 2c1404ab_bf28_6225_f9a0_b9e29400c66c
  style 9c7f13b7_8449_6563_16de_999ef83dd1ae fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import Link from "next/link"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/examples/radix/ui-rtl/breadcrumb"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/examples/radix/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 asChild>
            <Link href="/">{t.home}</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <DotIcon />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="flex items-center gap-1">
                {t.components}
                <ChevronDownIcon className="size-3.5" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              data-lang={dir === "rtl" ? language : undefined}
            >
              <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
  • 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 6 module(s): breadcrumb, dropdown-menu, language-selector, link, lucide-react, react.
Where is breadcrumb-rtl.tsx in the architecture?
breadcrumb-rtl.tsx is located at apps/v4/examples/radix/breadcrumb-rtl.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/radix).

Analyze Your Own Codebase

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

Try Supermodel Free