Add Admin

"use client"; import { useState } from "react"; import { motion } from "framer motion"; import { FaUser, FaEnvelope, FaIdCard, FaUserShield } from "react icons/fa"; export default function AdminForm() { const [email, setEmail] = useState(""); const [name, setName] = useState(""); const [mujid, setMujid] = useState(""); const [isAdmin, setIsAdmin] = useState(false); const [message, setMessage] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); const res = await fetch("/api/admin/manageUser", { method: "POST", body: JSON.stringify({ email, name, mujid, isAdmin }), headers: { "Content Type": "application/json" }, }); const data = await res.json(); setMessage(data.message || data.error); }; return ( <div className="min h screen bg gradient to br from blue 100 to indigo 200 flex items center justify center p 4"> <motion.div initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="bg white rounded lg shadow xl p 8 w full max w md" > <h2 className="text 3xl font bold text center text indigo 700 mb 6">Add Admin</h2> <form onSubmit={handleSubmit} className="space y 6"> <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative" > <FaUser className="absolute top 3 left 3 text gray 400" /> <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} required className="w full pl 10 pr 3 py 2 rounded md border border gray 300 focus:outline none focus:ring 2 focus:ring indigo 500" /> </motion.div> <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative" > <FaEnvelope className="absolute top 3 left 3 text gray 400" /> <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required className="w full pl 10 pr 3 py 2 rounded md border border gray 300 focus:outline none focus:ring 2 focus:ring indigo 500" /> </motion.div> <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative" > <FaIdCard className="absolute top 3 left 3 text gray 400" /> <input type="text" placeholder="MujID" value={mujid} onChange={(e) => setMujid(e.target.value)} required className="w full pl 10 pr 3 py 2 rounded md border border gray 300 focus:outline none focus:ring 2 focus:ring indigo 500" /> </motion.div> <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="flex items center space x 3" > <input type="checkbox" checked={isAdmin} onChange={(e) => setIsAdmin(e.target.checked)} id="isAdmin" className="h 5 w 5 text indigo 600 focus:ring indigo 500 border gray 300 rounded" /> <label htmlFor="isAdmin" className="flex items center cursor pointer"> <FaUserShield className="text indigo 600 mr 2" /> <span>Is Admin</span> </label> </motion.div> <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} type="submit" className="w full bg indigo 600 text white py 2 px 4 rounded md hover:bg indigo 700 focus:outline none focus:ring 2 focus:ring indigo 500 focus:ring offset 2 transition colors duration 300" > Submit </motion.button> </form> {message && ( <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} className="mt 4 text center text sm font medium text green 600" > {message} </motion.p> )} </motion.div> </div> ); } add an image in the background of this