"use client"; import React from "react"; import { Check, PenLine } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; export default function Editable() { const [edit, setEdit] = React.useState(false); const [value, setValue] = React.useState("Elementri"); return ( <div className="flex items-center rounded-full border pl-4 pr-1 py-1 bg-white"> <input type="text" className="outline-none bg-transparent text-sm text-black" value={value} onChange={(e)=> setValue(e.target.value)} disabled={!edit} /> <AnimatePresence mode="wait" initial={false}> {edit ? ( <motion.div key="check" initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.5 }} transition={{ duration: 0.2 }} > <Check className="cursor-pointer rounded-full w-8 p-2 h-8 bg-secondary" onClick={()=> setEdit(false)} /> </motion.div> ) : ( <motion.div key="pencil" initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.5 }} transition={{ duration: 0.2 }} > <PenLine className="cursor-pointer rounded-full w-8 p-2 h-8 bg-secondary" onClick={()=> setEdit(true)} /> </motion.div> )} </AnimatePresence> </div> ); }

Installation