FieldHear() — ui Function Reference

Architecture documentation for the FieldHear() function in field-hear.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ FieldHear() — ui Function Reference

Dependency Diagram

graph TD
  cf2d0ae4_94af_77e7_cb71_c492fae457a3["FieldHear()"]
  067a24f4_f10d_f4a0_456e_e652544d6590["field-hear.tsx"]
  cf2d0ae4_94af_77e7_cb71_c492fae457a3 -->|defined in| 067a24f4_f10d_f4a0_456e_e652544d6590
  style cf2d0ae4_94af_77e7_cb71_c492fae457a3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/field-hear.tsx lines 38–90

export function FieldHear() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]

  const options = [
    { label: t.socialMedia, value: "social-media" },
    { label: t.searchEngine, value: "search-engine" },
    { label: t.referral, value: "referral" },
    { label: t.other, value: "other" },
  ]

  return (
    <div dir={t.dir}>
      <Card className="border-0 py-4 shadow-none">
        <CardContent className="px-4">
          <form>
            <FieldGroup>
              <FieldSet className="gap-4">
                <FieldLegend>{t.legend}</FieldLegend>
                <FieldDescription className="line-clamp-1">
                  {t.description}
                </FieldDescription>
                <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
                  {options.map((option) => (
                    <FieldLabel
                      htmlFor={`rtl-${option.value}`}
                      key={option.value}
                      className="!w-fit"
                    >
                      <Field
                        orientation="horizontal"
                        className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
                      >
                        <Checkbox
                          value={option.value}
                          id={`rtl-${option.value}`}
                          defaultChecked={option.value === "social-media"}
                          className="-ms-6 translate-x-1 rounded-full transition-all duration-100 ease-linear data-checked:ms-0 data-checked:translate-x-0"
                        />
                        <FieldTitle>{option.label}</FieldTitle>
                      </Field>
                    </FieldLabel>
                  ))}
                </FieldGroup>
              </FieldSet>
            </FieldGroup>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}