import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group";
import { CheckIcon, CreditCardIcon, MailIcon, SearchIcon } from "lucide-react";

export function InputGroupIconDemo() {
return (
  <div className="grid w-full max-w-sm gap-6">
    <InputGroup>
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupInput type="email" placeholder="Enter your email" />
      <InputGroupAddon>
        <MailIcon />
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupInput placeholder="Card number" />
      <InputGroupAddon>
        <CreditCardIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <CheckIcon />
      </InputGroupAddon>
    </InputGroup>
  </div>
);
}

"use client";

import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from "@/components/ui/input-group";
import { CheckIcon, CopyIcon, StarIcon } from "lucide-react";
import * as React from "react";

export function InputGroupButtonDemo() {
const [copied, setCopied] = React.useState(false);
const [favorite, setFavorite] = React.useState(false);

return (
  <div className="grid w-full max-w-sm gap-6">
    <InputGroup>
      <InputGroupInput placeholder="https://x.com/shadcn" readOnly />
      <InputGroupAddon align="inline-end">
        <InputGroupButton
          aria-label="Copy"
          title="Copy"
          size="icon-xs"
          onClick={() => {
            navigator.clipboard?.writeText("https://x.com/shadcn");
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
          }}
        >
          {copied ? <CheckIcon /> : <CopyIcon />}
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <InputGroup className="[--radius:9999px]">
      <InputGroupAddon className="text-muted-foreground">
        https://
      </InputGroupAddon>
      <InputGroupInput placeholder="example.com" className="pl-0.5!" />
      <InputGroupAddon align="inline-end">
        <InputGroupButton
          aria-label="Favorite"
          aria-pressed={favorite}
          size="icon-xs"
          onClick={() => setFavorite(!favorite)}
        >
          <StarIcon
            data-favorite={favorite}
            className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
          />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupInput placeholder="Type to search..." />
      <InputGroupAddon align="inline-end">
        <InputGroupButton variant="secondary">Search</InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
);
}

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

export function InputGroupTextDemo() {
return (
  <div className="grid w-full max-w-sm gap-6">
    <InputGroup>
      <InputGroupAddon>
        <InputGroupText>$</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput placeholder="0.00" />
      <InputGroupAddon align="inline-end">
        <InputGroupText>USD</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupAddon>
        <InputGroupText>https://</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput placeholder="example.com" className="pl-0.5!" />
      <InputGroupAddon align="inline-end">
        <InputGroupText>.com</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupInput placeholder="Enter your username" />
      <InputGroupAddon align="inline-end">
        <InputGroupText>@company.com</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupTextarea placeholder="Enter your message" />
      <InputGroupAddon align="block-end">
        <InputGroupText className="text-muted-foreground text-xs">
          120 characters left
        </InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  </div>
);
}

import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupText,
InputGroupTextarea,
} from "@/components/ui/input-group";
import {
CopyIcon,
CornerDownLeftIcon,
FileCodeIcon,
RefreshCwIcon,
} from "lucide-react";

export function InputGroupTextareaDemo() {
return (
  <div className="grid w-full max-w-md gap-4">
    <InputGroup>
      <InputGroupTextarea
        id="textarea-code"
        placeholder="console.log('Hello, world!');"
        className="min-h-[200px]"
      />
      <InputGroupAddon align="block-end" className="border-t">
        <InputGroupText>Line 1, Column 1</InputGroupText>
        <InputGroupButton size="sm" className="ml-auto" variant="default">
          Run <CornerDownLeftIcon />
        </InputGroupButton>
      </InputGroupAddon>
      <InputGroupAddon align="block-start" className="border-b">
        <InputGroupText className="font-medium font-mono">
          <FileCodeIcon />
          script.js
        </InputGroupText>
        <InputGroupButton
          className="ml-auto"
          size="icon-xs"
          aria-label="Refresh"
        >
          <RefreshCwIcon />
        </InputGroupButton>
        <InputGroupButton variant="ghost" size="icon-xs" aria-label="Copy">
          <CopyIcon />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
);
}