Glass Input

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6export interface GlassInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
7  glowOnFocus?: boolean
8}
9 
10const GlassInput = React.forwardRef<HTMLInputElement, GlassInputProps>(
11  ({ className, type, glowOnFocus = true, ...props }, ref) => {
12    return (
13      <div className="relative group">
14        {glowOnFocus && (
15          <div className="absolute -inset-0.5 rounded-xl bg-linear-to-r from-cyan-500/0 via-blue-500/0 to-purple-500/0 blur-md opacity-0 transition-all duration-300 group-focus-within:from-cyan-500/30 group-focus-within:via-blue-500/30 group-focus-within:to-purple-500/30 group-focus-within:opacity-70" />
16        )}
17        <input
18          type={type}
19          className={cn(
20            "relative flex h-10 w-full rounded-xl px-4 py-2 text-sm",
21            "bg-white/10 backdrop-blur-xl border border-white/20",
22            "text-white placeholder:text-white/40",
23            "shadow-[0_4px_16px_rgba(0,0,0,0.2)]",
24            "transition-all duration-300",
25            "focus:outline-none focus:border-white/40 focus:bg-white/15",
26            "disabled:cursor-not-allowed disabled:opacity-50",
27            "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-white",
28            className,
29          )}
30          ref={ref}
31          {...props}
32        />
33      </div>
34    )
35  },
36)
37GlassInput.displayName = "GlassInput"
38 
39export { GlassInput }