Input Group

import { ArrowUpIcon, AtSignIcon, LockIcon, SearchIcon } from "lucide-react"

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"

export default function InputGroupDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupInput placeholder="Search" />
        <InputGroupAddon align="inline-end">
          <Kbd>⌘F</Kbd>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>
            <LockIcon /> https://
          </InputGroupText>
        </InputGroupAddon>
        <InputGroupInput defaultValue="appleseed.example" />
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="Username" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>
            <AtSignIcon /> icloud.com
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea placeholder="iMessage" rows={2} />
        <InputGroupAddon align="block-end" className="justify-end">
          <InputGroupButton variant="default" size="icon-xs" className="rounded-full" aria-label="Send">
            <ArrowUpIcon strokeWidth={2.5} />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}