Shadcn ui - Amazon Like Password Field

AmazonPasswordField.tsx

import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export const AmazonPasswordField = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement>
>(({ className, ...props }, ref) => {
  const [password, setPassword] = useState<string>("");
  const [showPassword, setShowPassword] = useState<boolean>(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  return (
    <div className="flex flex-col justify-start gap-2 items-start">
      <Label htmlFor="password" className="justify-start items-start">
        Password
      </Label>
      <Input
        ref={ref}
        {...props}
        id="password"
        type="password"
        autoComplete="off"
        value={password}
        onChange={handleChange}
        className={className}
        onFocus={() => setShowPassword(true)}
        onBlur={() => setShowPassword(false)}
      />
      {showPassword && password && (
        <div className="p-0.5 -mt-1.5 bg-white border w-full rounded-md text-left text-sm">
          <p className="ml-2">{password}</p>
        </div>
      )}
    </div>
  );
});

AmazonPasswordField.displayName = "AmazonPasswordField";