ButtonGroupInputGroup() — ui Function Reference

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

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ ButtonGroupInputGroup() — ui Function Reference

Dependency Diagram

graph TD
  28979d36_d309_d3b7_4e99_5473760af378["ButtonGroupInputGroup()"]
  eaab3f2c_aa35_2a4c_12ab_b6a1cc24ec11["button-group-input-group.tsx"]
  28979d36_d309_d3b7_4e99_5473760af378 -->|defined in| eaab3f2c_aa35_2a4c_12ab_b6a1cc24ec11
  style 28979d36_d309_d3b7_4e99_5473760af378 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx lines 38–82

export function ButtonGroupInputGroup() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]
  const [voiceEnabled, setVoiceEnabled] = React.useState(false)

  return (
    <ButtonGroup dir={t.dir}>
      <ButtonGroup>
        <Button variant="outline" size="icon" aria-label={t.add}>
          <PlusIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup className="flex-1">
        <InputGroup>
          <InputGroupInput
            placeholder={
              voiceEnabled ? t.voicePlaceholder : t.messagePlaceholder
            }
            disabled={voiceEnabled}
          />
          <InputGroupAddon align="inline-end">
            <Tooltip>
              <TooltipTrigger
                render={
                  <InputGroupButton
                    onClick={() => setVoiceEnabled(!voiceEnabled)}
                    data-active={voiceEnabled}
                    className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
                    aria-pressed={voiceEnabled}
                    size="icon-xs"
                    aria-label={t.voiceMode}
                  />
                }
              >
                <AudioLinesIcon />
              </TooltipTrigger>
              <TooltipContent>{t.voiceMode}</TooltipContent>
            </Tooltip>
          </InputGroupAddon>
        </InputGroup>
      </ButtonGroup>
    </ButtonGroup>
  )
}