ui Architecture Docs
Home / Function/ FieldDemo() — ui Function Reference

FieldDemo() — ui Function Reference

Architecture documentation for the FieldDemo() function in field-demo.tsx from the ui codebase.

Function tsx Internationalization Dictionary calls 4

Entity Profile

Dependency Diagram

graph TD
  adc42a8b_357a_b0bd_2f1d_115c792e55b3["FieldDemo()"]
  d3212926_0277_48c4_0b53_cc64137c8852["field-demo.tsx"]
  adc42a8b_357a_b0bd_2f1d_115c792e55b3 -->|defined in| d3212926_0277_48c4_0b53_cc64137c8852
  48602501_cdbe_1135_bf36_f54f447aed14["getMonths()"]
  adc42a8b_357a_b0bd_2f1d_115c792e55b3 -->|calls| 48602501_cdbe_1135_bf36_f54f447aed14
  24d6dea3_30b6_5aa8_ab81_e44dc306cc6c["getYears()"]
  adc42a8b_357a_b0bd_2f1d_115c792e55b3 -->|calls| 24d6dea3_30b6_5aa8_ab81_e44dc306cc6c
  66b0197a_b1c8_b739_75d0_6425d62dd51c["formatCardNumber()"]
  adc42a8b_357a_b0bd_2f1d_115c792e55b3 -->|calls| 66b0197a_b1c8_b739_75d0_6425d62dd51c
  2d3dfb69_e4a9_cb0e_9527_e5188a0fc1fd["formatCvv()"]
  adc42a8b_357a_b0bd_2f1d_115c792e55b3 -->|calls| 2d3dfb69_e4a9_cb0e_9527_e5188a0fc1fd
  style adc42a8b_357a_b0bd_2f1d_115c792e55b3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/field-demo.tsx lines 98–217

export function FieldDemo() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]
  const months = getMonths(t.locale)
  const years = getYears(t.locale)
  const cardPlaceholder = formatCardNumber(t.locale)
  const cvvPlaceholder = formatCvv(t.locale)

  return (
    <div dir={t.dir} className="w-full max-w-md rounded-lg border p-6">
      <form>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>{t.paymentMethod}</FieldLegend>
            <FieldDescription>{t.secureEncrypted}</FieldDescription>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="rtl-card-name">{t.nameOnCard}</FieldLabel>
                <Input
                  id="rtl-card-name"
                  placeholder={t.namePlaceholder}
                  required
                />
              </Field>
              <div className="grid grid-cols-3 gap-4">
                <Field className="col-span-2">
                  <FieldLabel htmlFor="rtl-card-number">
                    {t.cardNumber}
                  </FieldLabel>
                  <Input
                    id="rtl-card-number"
                    placeholder={cardPlaceholder}
                    required
                  />
                  <FieldDescription>{t.cardDescription}</FieldDescription>
                </Field>
                <Field className="col-span-1">
                  <FieldLabel htmlFor="rtl-cvv">{t.cvv}</FieldLabel>
                  <Input id="rtl-cvv" placeholder={cvvPlaceholder} required />
                </Field>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <Field>
                  <FieldLabel htmlFor="rtl-exp-month">{t.month}</FieldLabel>
                  <Select defaultValue="" items={months}>
                    <SelectTrigger id="rtl-exp-month">
                      <SelectValue placeholder="MM" />
                    </SelectTrigger>
                    <SelectContent data-lang={lang} dir={t.dir}>
                      <SelectGroup>
                        {months.map((item) => (
                          <SelectItem key={item.value} value={item.value}>
                            {item.label}
                          </SelectItem>
                        ))}
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel htmlFor="rtl-exp-year">{t.year}</FieldLabel>
                  <Select defaultValue="" items={years}>
                    <SelectTrigger id="rtl-exp-year">
                      <SelectValue placeholder="YYYY" />
                    </SelectTrigger>
                    <SelectContent data-lang={lang} dir={t.dir}>
                      <SelectGroup>
                        {years.map((item) => (
                          <SelectItem key={item.value} value={item.value}>
                            {item.label}
                          </SelectItem>
                        ))}
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </Field>
              </div>
            </FieldGroup>
          </FieldSet>
          <FieldSeparator />

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does FieldDemo() do?
FieldDemo() is a function in the ui codebase, defined in apps/v4/app/(app)/examples/rtl/components/field-demo.tsx.
Where is FieldDemo() defined?
FieldDemo() is defined in apps/v4/app/(app)/examples/rtl/components/field-demo.tsx at line 98.
What does FieldDemo() call?
FieldDemo() calls 4 function(s): formatCardNumber, formatCvv, getMonths, getYears.

Analyze Your Own Codebase

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

Try Supermodel Free