InputGroupDemo() — ui Function Reference

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

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ InputGroupDemo() — ui Function Reference

Dependency Diagram

graph TD
  c58ece8e_1189_2adf_e8f6_0ad91c1730cb["InputGroupDemo()"]
  9435dd19_32d5_8698_324f_ba3b606153ab["input-group-demo.tsx"]
  c58ece8e_1189_2adf_e8f6_0ad91c1730cb -->|defined in| 9435dd19_32d5_8698_324f_ba3b606153ab
  style c58ece8e_1189_2adf_e8f6_0ad91c1730cb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx lines 64–140

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

  return (
    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
      <InputGroup>
        <InputGroupInput placeholder={t.search} />
        <InputGroupAddon>
          <Search />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">{t.results}</InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder={t.example} />
        <InputGroupAddon align="inline-end">
          <Tooltip>
            <TooltipTrigger
              render={
                <InputGroupButton
                  className="rounded-full"
                  size="icon-xs"
                  aria-label={t.add}
                />
              }
            >
              <IconInfoCircle />
            </TooltipTrigger>
            <TooltipContent>{t.tooltipContent}</TooltipContent>
          </Tooltip>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea placeholder={t.askSearchChat} />
        <InputGroupAddon align="block-end">
          <InputGroupButton
            variant="outline"
            className="rounded-full"
            size="icon-xs"
            aria-label={t.add}
          >
            <IconPlus />
          </InputGroupButton>
          <DropdownMenu>
            <DropdownMenuTrigger render={<InputGroupButton variant="ghost" />}>
              <IconChevronDown />
            </DropdownMenuTrigger>
            <DropdownMenuContent side="top" align="start">
              <DropdownMenuItem>{t.auto}</DropdownMenuItem>
              <DropdownMenuItem>{t.agent}</DropdownMenuItem>
              <DropdownMenuItem>{t.manual}</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <InputGroupText className="ms-auto">{t.used}</InputGroupText>
          <Separator orientation="vertical" className="!h-4" />
          <InputGroupButton
            variant="default"
            className="rounded-full"
            size="icon-xs"
          >
            <ArrowUpIcon />
            <span className="sr-only">{t.send}</span>
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="shadcn" />
        <InputGroupAddon align="inline-end">
          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
            <IconCheck className="size-3 text-white" />
          </div>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}