Glass Textarea

1"use client"
2 
3import * as React from "react"
4import { motion } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7export interface GlassTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
8  glowOnFocus?: boolean
9  label?: string
10  error?: string
11}
12 
13const GlassTextarea = React.forwardRef<HTMLTextAreaElement, GlassTextareaProps>(
14  ({ className, glowOnFocus = true, label, error, id, ...props }, ref) => {
15    const textareaId = id || "glass-textarea-id"
16    const errorId = `${textareaId}-error`
17 
18    return (
19      <div className="relative w-full">
20        {label && (
21          <motion.label
22            htmlFor={textareaId}
23            className="block text-sm font-medium text-white/80 mb-2"
24            initial={{ opacity: 0, y: -4 }}
25            animate={{ opacity: 1, y: 0 }}
26            transition={{ duration: 0.2 }}
27          >
28            {label}
29          </motion.label>
30        )}
31        <motion.div
32          className="relative group"
33          initial={{ opacity: 0, y: 8 }}
34          animate={{ opacity: 1, y: 0 }}
35          transition={{ type: "spring", visualDuration: 0.3, bounce: 0.2 }}
36        >
37          {glowOnFocus && (
38            <motion.div
39              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 group-focus-within:from-cyan-500/30 group-focus-within:via-blue-500/30 group-focus-within:to-purple-500/30 transition-all duration-300"
40              aria-hidden="true"
41            />
42          )}
43          <textarea
44            id={textareaId}
45            className={cn(
46              "relative flex min-h-30 w-full rounded-xl px-4 py-3 text-sm",
47              "bg-white/10 backdrop-blur-xl border border-white/20",
48              "text-white placeholder:text-white/40",
49              "shadow-[0_4px_16px_rgba(0,0,0,0.2)]",
50              "transition-all duration-300 resize-none",
51              "focus:outline-none focus:border-white/40 focus:bg-white/15",
52              "focus:ring-2 focus:ring-cyan-400/30 focus:ring-offset-0",
53              "disabled:cursor-not-allowed disabled:opacity-50",
54              error && "border-red-400/50 focus:border-red-400/70 focus:ring-red-400/30",
55              className,
56            )}
57            ref={ref}
58            aria-invalid={error ? "true" : undefined}
59            aria-describedby={error ? errorId : undefined}
60            {...props}
61          />
62        </motion.div>
63        {error && (
64          <motion.p
65// … truncated