DialogRtl() — ui Function Reference

Architecture documentation for the DialogRtl() function in dialog-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ DialogRtl() — ui Function Reference

Dependency Diagram

graph TD
  6410f496_7c24_6f87_0579_8af00c700e1b["DialogRtl()"]
  c42e91c3_604e_8ded_ff41_545df21c1395["dialog-rtl.tsx"]
  6410f496_7c24_6f87_0579_8af00c700e1b -->|defined in| c42e91c3_604e_8ded_ff41_545df21c1395
  style 6410f496_7c24_6f87_0579_8af00c700e1b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/dialog-rtl.tsx lines 64–102

export function DialogRtl() {
  const { dir, t, language } = useTranslation(translations, "ar")

  return (
    <Dialog>
      <form>
        <DialogTrigger render={<Button variant="outline" />}>
          {t.openDialog}
        </DialogTrigger>
        <DialogContent
          className="sm:max-w-sm"
          dir={dir}
          data-lang={dir === "rtl" ? language : undefined}
        >
          <DialogHeader>
            <DialogTitle>{t.editProfile}</DialogTitle>
            <DialogDescription>{t.description}</DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field>
              <Label htmlFor="name-1">{t.name}</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </Field>
            <Field>
              <Label htmlFor="username-1">{t.username}</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <DialogClose render={<Button variant="outline" />}>
              {t.cancel}
            </DialogClose>
            <Button type="submit">{t.saveChanges}</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  )
}