ButtonGroupPopover() — ui Function Reference

Architecture documentation for the ButtonGroupPopover() function in button-group-popover.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ ButtonGroupPopover() — ui Function Reference

Dependency Diagram

graph TD
  def05b15_3aec_a8c7_e369_7a6c8a3e8df3["ButtonGroupPopover()"]
  f6b5f5f6_8680_a6a4_a596_4e9d358dde68["button-group-popover.tsx"]
  def05b15_3aec_a8c7_e369_7a6c8a3e8df3 -->|defined in| f6b5f5f6_8680_a6a4_a596_4e9d358dde68
  style def05b15_3aec_a8c7_e369_7a6c8a3e8df3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx lines 39–83

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

  return (
    <ButtonGroup dir={t.dir}>
      <Button variant="outline" size="sm">
        <BotIcon /> {t.copilot}
      </Button>
      <Popover>
        <PopoverTrigger
          render={
            <Button
              variant="outline"
              size="icon-sm"
              aria-label={t.openPopover}
            />
          }
        >
          <ChevronDownIcon />
        </PopoverTrigger>
        <PopoverContent
          align="start"
          dir={t.dir}
          data-lang={lang}
          className="p-0"
        >
          <div className="px-4 py-3">
            <div className="text-sm font-medium">{t.agentTasks}</div>
          </div>
          <Separator />
          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
            <Textarea
              placeholder={t.placeholder}
              className="mb-4 resize-none"
            />
            <p className="font-medium">{t.startTask}</p>
            <p className="text-muted-foreground">{t.description}</p>
          </div>
        </PopoverContent>
      </Popover>
    </ButtonGroup>
  )
}