CollapsibleRtl() — ui Function Reference

Architecture documentation for the CollapsibleRtl() function in collapsible-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ CollapsibleRtl() — ui Function Reference

Dependency Diagram

graph TD
  780c0106_4397_37be_e829_703dc36c43ba["CollapsibleRtl()"]
  f8f6f6f2_3f47_f8e8_c4d3_e7329ee94342["collapsible-rtl.tsx"]
  780c0106_4397_37be_e829_703dc36c43ba -->|defined in| f8f6f6f2_3f47_f8e8_c4d3_e7329ee94342
  style 780c0106_4397_37be_e829_703dc36c43ba fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/collapsible-rtl.tsx lines 56–92

export function CollapsibleRtl() {
  const { dir, t } = useTranslation(translations, "ar")
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="flex w-[350px] flex-col gap-2"
      dir={dir}
    >
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="text-sm font-semibold">{t.orderNumber}</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" className="size-8">
            <ChevronsUpDown />
            <span className="sr-only">Toggle details</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
        <span className="text-muted-foreground">{t.status}</span>
        <span className="font-medium">{t.shipped}</span>
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">{t.shippingAddress}</p>
          <p className="text-muted-foreground">{t.address}</p>
        </div>
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">{t.items}</p>
          <p className="text-muted-foreground">{t.itemsDescription}</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}