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

select-rtl.tsx — ui Source File

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

File tsx DocumentationAtlas SearchAPI 3 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  fb962ced_13cc_c8f6_7825_3b70b7581a47["select-rtl.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  fb962ced_13cc_c8f6_7825_3b70b7581a47 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  456b3003_eedf_fd22_e346_2822d2817415["select"]
  fb962ced_13cc_c8f6_7825_3b70b7581a47 --> 456b3003_eedf_fd22_e346_2822d2817415
  2c1404ab_bf28_6225_f9a0_b9e29400c66c["language-selector"]
  fb962ced_13cc_c8f6_7825_3b70b7581a47 --> 2c1404ab_bf28_6225_f9a0_b9e29400c66c
  style fb962ced_13cc_c8f6_7825_3b70b7581a47 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/examples/radix/ui-rtl/select"

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

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      selectFruit: "Select a fruit",
      fruits: "Fruits",
      apple: "Apple",
      banana: "Banana",
      blueberry: "Blueberry",
      grapes: "Grapes",
      pineapple: "Pineapple",
      vegetables: "Vegetables",
      carrot: "Carrot",
      broccoli: "Broccoli",
      spinach: "Spinach",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      selectFruit: "اختر فاكهة",
      fruits: "الفواكه",
      apple: "تفاح",
      banana: "موز",
      blueberry: "توت أزرق",
      grapes: "عنب",
      pineapple: "أناناس",
      vegetables: "الخضروات",
      carrot: "جزر",
      broccoli: "بروكلي",
      spinach: "سبانخ",
    },
  },
  he: {
    dir: "rtl",
    values: {
      selectFruit: "בחר פרי",
      fruits: "פירות",
      apple: "תפוח",
      banana: "בננה",
      blueberry: "אוכמניה",
      grapes: "ענבים",
      pineapple: "אננס",
      vegetables: "ירקות",
      carrot: "גזר",
      broccoli: "ברוקולי",
      spinach: "תרד",
    },
  },
}

export function SelectRtl() {
  const { dir, t, language } = useTranslation(translations, "ar")
  const [selectedFruit, setSelectedFruit] = React.useState<string>("")

  const fruits = [
    { label: t.apple, value: "apple" },
    { label: t.banana, value: "banana" },
    { label: t.blueberry, value: "blueberry" },
    { label: t.grapes, value: "grapes" },
    { label: t.pineapple, value: "pineapple" },
  ]

  const vegetables = [
    { label: t.carrot, value: "carrot" },
    { label: t.broccoli, value: "broccoli" },
    { label: t.spinach, value: "spinach" },
  ]

  return (
    <Select value={selectedFruit} onValueChange={setSelectedFruit}>
      <SelectTrigger className="w-32" dir={dir}>
        <SelectValue placeholder={t.selectFruit} />
      </SelectTrigger>
      <SelectContent dir={dir} data-lang={dir === "rtl" ? language : undefined}>
        <SelectGroup>
          <SelectLabel>{t.fruits}</SelectLabel>
          {fruits.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>{t.vegetables}</SelectLabel>
          {vegetables.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Domain

Subdomains

Functions

Dependencies

  • language-selector
  • react
  • select

Source

Frequently Asked Questions

What does select-rtl.tsx do?
select-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 select-rtl.tsx?
select-rtl.tsx defines 1 function(s): SelectRtl.
What does select-rtl.tsx depend on?
select-rtl.tsx imports 3 module(s): language-selector, react, select.
Where is select-rtl.tsx in the architecture?
select-rtl.tsx is located at apps/v4/examples/radix/select-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