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
  3d114dc4_349e_b51d_1a7d_94c22da44e64["SheetRtl()"]
  3fb48e54_e611_244f_a1f4_18afd4f99e69["sheet-rtl.tsx"]
  3d114dc4_349e_b51d_1a7d_94c22da44e64 -->|defined in| 3fb48e54_e611_244f_a1f4_18afd4f99e69
  style 3d114dc4_349e_b51d_1a7d_94c22da44e64 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

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

  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">{t.open}</Button>
      </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 asChild>
            <Button variant="outline">{t.close}</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}