"use client";
import * as React from "react";
import { AnimatePresence, motion } from "motion/react";
import { ArrowRightIcon, CheckIcon, EnvelopeSimpleIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
import { Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input";
import { springs } from "@/lib/motion";

/** Newsletter field from the company site footer: arrow becomes a check after submit. */
function Newsletter() {
  const [sent, setSent] = React.useState(false);
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setSent(true);
        setTimeout(() => setSent(false), 2000);
      }}
    >
      <InputGroup>
        <InputGroupAddon><EnvelopeSimpleIcon /></InputGroupAddon>
        <InputGroupInput type="email" required placeholder="you@parlemen.dev" aria-label="Email" />
        <InputGroupButton type="submit" aria-label="Subscribe" className={sent ? "bg-success text-on-success" : undefined}>
          <AnimatePresence mode="popLayout" initial={false}>
            <motion.span
              key={sent ? "ok" : "go"}
              className="grid"
              initial={{ scale: 0, rotate: -90 }}
              animate={{ scale: 1, rotate: 0 }}
              exit={{ scale: 0, rotate: 90 }}
              transition={springs.bouncy}
            >
              {sent ? <CheckIcon weight="bold" /> : <ArrowRightIcon weight="bold" />}
            </motion.span>
          </AnimatePresence>
        </InputGroupButton>
      </InputGroup>
    </form>
  );
}

export default function InputDemo() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <Input placeholder="Plain input" />
      <InputGroup>
        <InputGroupAddon><MagnifyingGlassIcon /></InputGroupAddon>
        <InputGroupInput placeholder="Search components..." aria-label="Search" />
      </InputGroup>
      <Newsletter />
      <Input placeholder="Invalid" aria-invalid defaultValue="not-an-email" />
    </div>
  );
}
Installation
