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

button-rtl.tsx — ui Source File

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

File tsx DocumentationAtlas ContentSourcing 4 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  968ac887_5d60_fbed_7d0a_760f0580b153["button-rtl.tsx"]
  c79cdc74_50fb_62bd_465f_35936d2c5eac["button"]
  968ac887_5d60_fbed_7d0a_760f0580b153 --> c79cdc74_50fb_62bd_465f_35936d2c5eac
  53501bdc_ab5f_75a7_bdb5_dceaa6b1a775["spinner"]
  968ac887_5d60_fbed_7d0a_760f0580b153 --> 53501bdc_ab5f_75a7_bdb5_dceaa6b1a775
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  968ac887_5d60_fbed_7d0a_760f0580b153 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  2c1404ab_bf28_6225_f9a0_b9e29400c66c["language-selector"]
  968ac887_5d60_fbed_7d0a_760f0580b153 --> 2c1404ab_bf28_6225_f9a0_b9e29400c66c
  style 968ac887_5d60_fbed_7d0a_760f0580b153 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Button } from "@/examples/radix/ui-rtl/button"
import { Spinner } from "@/examples/radix/ui-rtl/spinner"
import { ArrowRightIcon, PlusIcon } from "lucide-react"

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

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      button: "Button",
      submit: "Submit",
      delete: "Delete",
      loading: "Loading",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      button: "زر",
      submit: "إرسال",
      delete: "حذف",
      loading: "جاري التحميل",
    },
  },
  he: {
    dir: "rtl",
    values: {
      button: "כפתור",
      submit: "שלח",
      delete: "מחק",
      loading: "טוען",
    },
  },
}

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

  return (
    <div className="flex flex-wrap items-center gap-2 md:flex-row" dir={dir}>
      <Button variant="outline">{t.button}</Button>
      <Button variant="destructive">{t.delete}</Button>
      <Button variant="outline">
        {t.submit}{" "}
        <ArrowRightIcon className="rtl:rotate-180" data-icon="inline-end" />
      </Button>
      <Button variant="outline" size="icon" aria-label="Add">
        <PlusIcon />
      </Button>
      <Button variant="secondary" disabled>
        <Spinner data-icon="inline-start" /> {t.loading}
      </Button>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • language-selector
  • lucide-react
  • spinner

Source

Frequently Asked Questions

What does button-rtl.tsx do?
button-rtl.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, ContentSourcing subdomain.
What functions are defined in button-rtl.tsx?
button-rtl.tsx defines 1 function(s): ButtonRtl.
What does button-rtl.tsx depend on?
button-rtl.tsx imports 4 module(s): button, language-selector, lucide-react, spinner.
Where is button-rtl.tsx in the architecture?
button-rtl.tsx is located at apps/v4/examples/radix/button-rtl.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, 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