1import React, { useState } from "react";
2import { motion } from "framer-motion";
3import { Eye, EyeOff, Search, Mail, User } from "lucide-react";
4
5const InputWrapper = ({ children }: { children: React.ReactNode }) => (
6  <div className="flex flex-row md:flex-row flex-wrap justify-center items-center gap-6 py-10 bg-gradient-to-b from-slate-900 to-black text-white">
7    {children}
8  </div>
9);
10
11const baseInput =
12  "w-72 px-4 py-3 rounded-xl border outline-none bg-transparent focus:ring-2 transition-all duration-300";
13
14return function AmazingInputs() {
15  const [passwordVisible, setPasswordVisible] = useState(false);
16  const [search, setSearch] = useState("");
17
18  return (
19    <InputWrapper>
20      {/* Floating Label Input */}
21      <motion.div
22        className="relative"
23        initial={{ opacity: 0, y: 20 }}
24        animate={{ opacity: 1, y: 0 }}
25      >
26        <input
27          id="name"
28          type="text"
29          className={`${baseInput} peer border-gray-500 focus:border-indigo-500 focus:ring-indigo-500`}
30          placeholder=" "
31        />
32        <label
33          htmlFor="name"
34          className="absolute left-4 top-3 text-gray-400 transition-all duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-500 peer-placeholder-shown:text-base peer-focus:-top-2 peer-focus:text-sm peer-focus:text-indigo-400 bg-slate-900 px-1"
35        >
36          Full Name
37        </label>
38      </motion.div>
39
40      {/* Glowing Border Input */}
41      <motion.input
42        whileFocus={{ boxShadow: "0 0 12px #10b981" }}
43        type="email"
44        placeholder="Enter your email"
45        className={`${baseInput} border-emerald-400 focus:ring-emerald-400`}
46      />
47
48      {/* Glassmorphic Input */}
49      <motion.input
50        whileFocus={{ scale: 1.03 }}
51        type="text"
52        placeholder="Glassmorphic field"
53        className={`${baseInput} border-white/30 bg-white/10 backdrop-blur-md focus:border-cyan-400 focus:ring-cyan-400 placeholder-gray-300`}
54      />
55
56      {/* Input with Icon */}
57      <div className="relative w-72">
58        <Search className="absolute left-3 top-3.5 text-gray-400" size={18} />
59        <motion.input
60          whileFocus={{ scale: 1.02 }}
61          type="text"
62          value={search}
63          onChange={(e) => setSearch(e.target.value)}
64          placeholder="Search..."
65          className={`${baseInput} pl-10 border-gray-500 focus:border-blue-500 focus:ring-blue-500`}
66        />
67      </div>
68
69      {/* Password Reveal Input */}
70      <div className="relative w-72">
71        <motion.input
72          whileFocus={{ scale: 1.02 }}
73          type={passwordVisible ? "text" : "password"}
74          placeholder="Enter password"
75          className={`${baseInput} border-pink-400 focus:border-pink-500 focus:ring-pink-500`}
76        />
77        <button
78          type="button"
79          onClick={() => setPasswordVisible(!passwordVisible)}
80          className="absolute right-3 top-3 text-gray-300 hover:text-white"
81        >
82          {passwordVisible ? <EyeOff size={18} /> : <Eye size={18} />}
83        </button>
84      </div>
85
86      {/* Icon Label Input */}
87      <div className="relative w-72">
88        <User className="absolute left-3 top-3.5 text-gray-400" size={18} />
89        <motion.input
90          whileFocus={{ scale: 1.03 }}
91          type="text"
92          placeholder="Username"
93          className={`${baseInput} pl-10 border-gray-600 focus:border-purple-500 focus:ring-purple-500`}
94        />
95      </div>
96
97      {/* Email Input */}
98      <div className="relative w-72">
99        <Mail className="absolute left-3 top-3.5 text-gray-400" size={18} />
100        <motion.input
101          whileFocus={{ scale: 1.02 }}
102          type="email"
103          placeholder="Email address"
104          className={`${baseInput} pl-10 border-gray-600 focus:border-sky-500 focus:ring-sky-500`}
105        />
106      </div>
107    </InputWrapper>
108  );
109}