Input

"use client";

import { Mail, Phone, Search } from "lucide-react";
import { Input } from "@/ui";

export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <Input type="email" placeholder="Enter email" leading={<Mail />} trailing={"@example.com"} />
      <Input type="search" placeholder="Search..." leading={<Search />} />
      <Input type="tel" placeholder="Enter phone" leading={<Phone />} />
    </div>
  );
}

"use client";
import { useState } from "react";
import { Input } from "@/ui";

export default function Demo() {
  const [value, setValue] = useState("");
  const [invalid, setInvalid] = useState(false);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const val = e.target.value;
    setValue(val);
    if (!val) {
      setInvalid(false);
      return;
    }
    const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
    setInvalid(!isEmail);
  }

  return (
    <div className="flex flex-col gap-4 w-72">
      <Input
        type="email"
        placeholder="Enter email"
        value={value}
        invalid={invalid}
        onChange={handleChange}
      />
      {invalid && <span className="text-danger text-sm">Please enter a valid email address</span>}
    </div>
  );
}

"use client";import { useState } from "react";import { Search, TriangleAlert } from "lucide-react";import { InputGroup, InputLeading, InputRoot, InputTrailing } from "@/ui";export default function Demo() {  const [value, setValue] = useState("");  const invalid = value.length > 0 && !value.includes("@");  return (    <InputGroup data-invalid={invalid || undefined}>      <InputLeading>        <Search />      </InputLeading>      <InputRoot        value={value}        onChange={(e) => setValue(e.target.value)}        placeholder="Search mail..."        aria-invalid={invalid}      />      <InputTrailing>        {invalid ? (          <TriangleAlert className="text-danger" />        ) : (          <kbd className="font-mono text-xs">⌘+K</kbd>        )}      </InputTrailing>    </InputGroup>  );}