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
  d7ee6e71_8a19_151a_b4eb_71b2d4afc48f["button-rtl.tsx"]
  43bb9fc1_6eab_13df_a99b_981eb13b9ec1["button"]
  d7ee6e71_8a19_151a_b4eb_71b2d4afc48f --> 43bb9fc1_6eab_13df_a99b_981eb13b9ec1
  883da1ad_449f_ee4a_3133_4f4e76e38d95["spinner"]
  d7ee6e71_8a19_151a_b4eb_71b2d4afc48f --> 883da1ad_449f_ee4a_3133_4f4e76e38d95
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  d7ee6e71_8a19_151a_b4eb_71b2d4afc48f --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  2c1404ab_bf28_6225_f9a0_b9e29400c66c["language-selector"]
  d7ee6e71_8a19_151a_b4eb_71b2d4afc48f --> 2c1404ab_bf28_6225_f9a0_b9e29400c66c
  style d7ee6e71_8a19_151a_b4eb_71b2d4afc48f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Button } from "@/examples/base/ui-rtl/button"
import { Spinner } from "@/examples/base/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/base/button-rtl.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, 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