import { InputGroup } from "@smartacteam/ambient-web/input-group";<InputGroup.Root>
<InputGroup.TextInput placeholder="Search..." />
<InputGroup.Addon>
<CentralIcon
radius="2"
stroke="1.5"
fill="outlined"
name="IconMagnifyingGlass"
/>
</InputGroup.Addon>
<InputGroup.Addon align="inline-end">
<InputGroup.Button>Search</InputGroup.Button>
</InputGroup.Addon>
</InputGroup.Root>import { Menu } from "@smartacteam/ambient-web/dropdown-menu";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";
import { Separator } from "@smartacteam/ambient-web/separator";
import { Tooltip } from "@smartacteam/ambient-web/tooltip";
export function InputGroupDemo() {
return (
<div className="grid w-full max-w-sm gap-6">
<InputGroup.Root>
<InputGroup.Input render={<Input.Text placeholder="Search..." />} />
<InputGroup.Addon>
<CentralIcon
radius="2"
stroke="1.5"
fill="outlined"
name="IconMagnifyingGlass"
/>
</InputGroup.Addon>
<InputGroup.Addon align="inline-end">12 results</InputGroup.Addon>
</InputGroup.Root>
<InputGroup.Root>
<InputGroup.Input
render={<Input.Text placeholder="example.com" className="pl-1!" />}
/>
<InputGroup.Addon>
<InputGroup.Text>https://</InputGroup.Text>
</InputGroup.Addon>
<InputGroup.Addon align="inline-end">
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger
render={
<CentralIcon
radius="2"
stroke="1.5"
fill="outlined"
name="IconCircleInfo"
/>
}
/>
<Tooltip.Content>This is content in a tooltip.</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
</InputGroup.Addon>
</InputGroup.Root>
<InputGroup.Root>
<InputGroup.Textarea placeholder="Ask, Search or Chat..." />
<InputGroup.Addon align="block-end">
<InputGroup.Button className="rounded-full">
<CentralIcon
radius="2"
stroke="1.5"
fill="outlined"
name="IconPlusLarge"
/>
</InputGroup.Button>
<Menu.Root>
<Menu.Trigger
render={
<InputGroup.Button size="default">Auto</InputGroup.Button>
}
/>
<Menu.Content
// side="top"
align="start"
className="[--radius:0.95rem]"
>
<Menu.Item>Auto</Menu.Item>
<Menu.Item>Agent</Menu.Item>
<Menu.Item>Manual</Menu.Item>
</Menu.Content>
</Menu.Root>
<InputGroup.Text className="ml-auto">52% used</InputGroup.Text>
<Separator orientation="vertical" className="h-4!" />
<InputGroup.Button className="rounded-full" disabled>
<CentralIcon
radius="2"
stroke="1.5"
fill="outlined"
name="IconArrowUp"
className="size-4"
/>
<span className="sr-only">Send</span>
</InputGroup.Button>
</InputGroup.Addon>
</InputGroup.Root>
<InputGroup.Root>
<InputGroup.Input render={<Input.Text placeholder="@ilikescience" />} />
<InputGroup.Addon align="inline-end">
<div className="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
<CentralIcon
radius="2"
stroke="1.5"
fill="outlined"
name="IconCheckmark2"
/>
</div>
</InputGroup.Addon>
</InputGroup.Root>
</div>
);
}