"use client";

import { useState } from "react";

export function FloatingLabelInput() {
  const [v, setV] = useState("");
  const [focused, setFocused] = useState(false);
  const floated = focused || v.length > 0;

  return (
    <div className="bg-[#FAFAF8] p-16 grid place-items-center min-h-[200px]">
      <div className="w-full max-w-xs relative">
        <input
          id="name"
          type="text"
          value={v}
          onChange={(e) => setV(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          className={`peer w-full border bg-[#FAFAF8] rounded-md px-3 pt-5 pb-2 text-[14px] text-[#111111] outline-none transition-colors ${
            focused ? "border-[#111111]" : "border-[#1111111A]"
          }`}
        />
        <label
          htmlFor="name"
          className="absolute left-3 pointer-events-none origin-left transition-all duration-200"
          style={{
            top: floated ? 6 : 14,
            fontSize: floated ? 11 : 14,
            color: floated ? "#2A3D2F" : "#6B6B66",
            fontFamily: floated
              ? "ui-monospace, monospace"
              : "inherit",
            letterSpacing: floated ? "0.12em" : "0",
            textTransform: floated ? "uppercase" : "none",
          }}
        >
          {floated ? "Your name" : "Your name"}
        </label>
      </div>
    </div>
  );
}
Floating Label Input
