SheetRtl() — ui Function Reference

Architecture documentation for the SheetRtl() function in sheet-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ SheetRtl() — ui Function Reference

Dependency Diagram

graph TD
  fb5dc48e_17f9_cfb3_07f4_a27b0f86d4c4["SheetRtl()"]
  7a8b99d3_f64c_6435_6ba2_69eac1279439["sheet-rtl.tsx"]
  fb5dc48e_17f9_cfb3_07f4_a27b0f86d4c4 -->|defined in| 7a8b99d3_f64c_6435_6ba2_69eac1279439
  style fb5dc48e_17f9_cfb3_07f4_a27b0f86d4c4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/sheet-rtl.tsx lines 63–99

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

  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        {t.open}
      </SheetTrigger>
      <SheetContent
        dir={dir}
        side={dir === "rtl" ? "left" : "right"}
        data-lang={dir === "rtl" ? language : undefined}
      >
        <SheetHeader>
          <SheetTitle>{t.editProfile}</SheetTitle>
          <SheetDescription>{t.description}</SheetDescription>
        </SheetHeader>
        <FieldGroup className="px-4">
          <Field>
            <FieldLabel htmlFor="sheet-rtl-name">{t.name}</FieldLabel>
            <Input id="sheet-rtl-name" defaultValue="Pedro Duarte" />
          </Field>
          <Field>
            <FieldLabel htmlFor="sheet-rtl-username">{t.username}</FieldLabel>
            <Input id="sheet-rtl-username" defaultValue="peduarte" />
          </Field>
        </FieldGroup>
        <SheetFooter>
          <Button type="submit">{t.save}</Button>
          <SheetClose render={<Button variant="outline" />}>
            {t.close}
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}