ui Architecture Docs
Home / File/ field-demo.tsx — ui Source File

field-demo.tsx — ui Source File

Architecture documentation for field-demo.tsx, a tsx file in the ui codebase. 7 imports, 1 dependents.

File tsx Internationalization Dictionary 7 imports 1 dependents 5 functions

Entity Profile

Dependency Diagram

graph LR
  d3212926_0277_48c4_0b53_cc64137c8852["field-demo.tsx"]
  43bb9fc1_6eab_13df_a99b_981eb13b9ec1["button"]
  d3212926_0277_48c4_0b53_cc64137c8852 --> 43bb9fc1_6eab_13df_a99b_981eb13b9ec1
  cc83a0fe_5b64_ae51_20ef_2b5653e9e45f["checkbox"]
  d3212926_0277_48c4_0b53_cc64137c8852 --> cc83a0fe_5b64_ae51_20ef_2b5653e9e45f
  7e9c1e20_5a8a_4152_90a3_40c280dc340e["field"]
  d3212926_0277_48c4_0b53_cc64137c8852 --> 7e9c1e20_5a8a_4152_90a3_40c280dc340e
  480dda64_480e_8d00_f8b9_f67f82fb7c4b["input"]
  d3212926_0277_48c4_0b53_cc64137c8852 --> 480dda64_480e_8d00_f8b9_f67f82fb7c4b
  530aee77_5348_0356_b38e_5d1d5048ceb6["select"]
  d3212926_0277_48c4_0b53_cc64137c8852 --> 530aee77_5348_0356_b38e_5d1d5048ceb6
  0eff32f6_d3b5_8091_7623_497e677665f0["textarea"]
  d3212926_0277_48c4_0b53_cc64137c8852 --> 0eff32f6_d3b5_8091_7623_497e677665f0
  2c1404ab_bf28_6225_f9a0_b9e29400c66c["language-selector"]
  d3212926_0277_48c4_0b53_cc64137c8852 --> 2c1404ab_bf28_6225_f9a0_b9e29400c66c
  a20493d4_39f4_bced_97b9_027078a02a91["index.tsx"]
  a20493d4_39f4_bced_97b9_027078a02a91 --> d3212926_0277_48c4_0b53_cc64137c8852
  style d3212926_0277_48c4_0b53_cc64137c8852 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Button } from "@/examples/base/ui-rtl/button"
import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from "@/examples/base/ui-rtl/field"
import { Input } from "@/examples/base/ui-rtl/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/examples/base/ui-rtl/select"
import { Textarea } from "@/examples/base/ui-rtl/textarea"

import { useLanguageContext } from "@/components/language-selector"

const translations = {
  ar: {
    dir: "rtl" as const,
    locale: "ar-SA",
    paymentMethod: "طريقة الدفع",
    secureEncrypted: "جميع المعاملات آمنة ومشفرة",
    nameOnCard: "الاسم على البطاقة",
    namePlaceholder: "أحمد محمد",
    cardNumber: "رقم البطاقة",
    cardDescription: "أدخل رقمك المكون من 16 رقمًا.",
    cvv: "رمز الأمان",
    month: "الشهر",
    year: "السنة",
    billingAddress: "عنوان الفواتير",
    billingDescription: "عنوان الفواتير المرتبط بطريقة الدفع الخاصة بك",
    sameAsShipping: "نفس عنوان الشحن",
    comments: "تعليقات",
    commentsPlaceholder: "أضف أي تعليقات إضافية",
    submit: "إرسال",
    cancel: "إلغاء",
  },
  he: {
    dir: "rtl" as const,
    locale: "he-IL",
    paymentMethod: "אמצעי תשלום",
    secureEncrypted: "כל העסקאות מאובטחות ומוצפנות",
    nameOnCard: "שם על הכרטיס",
    namePlaceholder: "ישראל ישראלי",
    cardNumber: "מספר כרטיס",
    cardDescription: "הזן את המספר בן 16 הספרות שלך.",
    cvv: "קוד אבטחה",
    month: "חודש",
    year: "שנה",
    billingAddress: "כתובת לחיוב",
// ... (158 more lines)

Domain

Subdomains

Functions

Dependencies

  • button
  • checkbox
  • field
  • input
  • language-selector
  • select
  • textarea

Imported By

Source

Frequently Asked Questions

What does field-demo.tsx do?
field-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the Internationalization domain, Dictionary subdomain.
What functions are defined in field-demo.tsx?
field-demo.tsx defines 5 function(s): FieldDemo, formatCardNumber, formatCvv, getMonths, getYears.
What does field-demo.tsx depend on?
field-demo.tsx imports 7 module(s): button, checkbox, field, input, language-selector, select, textarea.
What files import field-demo.tsx?
field-demo.tsx is imported by 1 file(s): index.tsx.
Where is field-demo.tsx in the architecture?
field-demo.tsx is located at apps/v4/app/(app)/examples/rtl/components/field-demo.tsx (domain: Internationalization, subdomain: Dictionary, directory: apps/v4/app/(app)/examples/rtl/components).

Analyze Your Own Codebase

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

Try Supermodel Free