"use client";

import {
  Button,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@countryclub/ui-react";
import { SearchIcon } from "lucide-react";

export default function InputGroupDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <InputGroup>
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupInput placeholder="Search members" />
      </InputGroup>
      <InputGroup>
        <InputGroupInput defaultValue="morning-nine" placeholder="Tee sheet" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>.country.club</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="Invite a member by email" type="email" />
        <InputGroupAddon align="inline-end">
          <Button size="xs" variant="secondary">
            Invite
          </Button>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}
Input Group

Import

Default
