InputGroupButtonExample() — ui Function Reference

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

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ InputGroupButtonExample() — ui Function Reference

Dependency Diagram

graph TD
  f1ab5e33_194e_80b2_b569_964a77f570a2["InputGroupButtonExample()"]
  2b11067e_2247_7775_9a4a_87a2ae75b8b6["input-group-button.tsx"]
  f1ab5e33_194e_80b2_b569_964a77f570a2 -->|defined in| 2b11067e_2247_7775_9a4a_87a2ae75b8b6
  style f1ab5e33_194e_80b2_b569_964a77f570a2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

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

  return (
    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
      <Label htmlFor="input-secure-rtl" className="sr-only">
        {t.inputLabel}
      </Label>
      <InputGroup className="[--radius:9999px]">
        <InputGroupInput id="input-secure-rtl" className="!pr-0.5" />
        <InputGroupAddon>
          <Popover>
            <PopoverTrigger
              render={
                <InputGroupButton
                  variant="secondary"
                  size="icon-xs"
                  aria-label={t.info}
                />
              }
            >
              <IconInfoCircle />
            </PopoverTrigger>
            <PopoverContent
              align="end"
              alignOffset={10}
              className="flex flex-col gap-1 rounded-xl text-sm"
              data-lang={lang}
              dir={t.dir}
            >
              <p className="font-medium">{t.priceInfo}</p>
              <p>{t.priceDescription}</p>
            </PopoverContent>
          </Popover>
        </InputGroupAddon>
        <InputGroupAddon className="text-muted-foreground">
          {t.currency}
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            onClick={() => setIsFavorite(!isFavorite)}
            size="icon-xs"
            aria-label={t.favorite}
          >
            <IconStar
              data-favorite={isFavorite}
              className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
            />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}