Inline Edit

1"use client";
2 
3import { AnimatePresence, motion } from "motion/react";
4import { useRef, useState } from "react";
5import { Edit01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
6import { HugeiconsIcon } from "@hugeicons/react";
7import { Input } from "@/components/ui/input";
8import { cn } from "@/lib/cn";
9 
10function SaveInput() {
11  const [isEditing, setIsEditing] = useState(false);
12  const [value, setValue] = useState("this.urvish");
13 
14  const inputRef = useRef<HTMLInputElement>(null);
15 
16  return (
17    <div className="w-full flex justify-center items-center text-xl">
18      <motion.div
19        layout
20        initial={{
21          boxShadow: "0px 0px 2px hsl(var(--foreground) / 0.1)",
22        }}
23        animate={{
24          boxShadow: isEditing
25            ? " none border border-foreground"
26            : "0px 0px 2px hsl(var(--foreground) / 0.1)",
27        }}
28        className={cn(
29          "flex items-center relative  overflow-hidden border-2 bg-background",
30          isEditing &&
31            "outline-none ring-2 ring-ring ring-offset-2 ring-offset-background"
32        )}
33        style={{ borderRadius: 60 }}
34      >
35        <Input
36          ref={inputRef}
37          value={value}
38          onChange={(e) => setValue(e.target.value)}
39          readOnly={!isEditing}
40          className={cn(
41            "h-12 border-0 shadow-none focus-visible:ring-0 bg-transparent p-0 text-base w-full min-w-32 pl-4 pr-12",
42            isEditing ? "text-foreground" : "text-muted-foreground"
43          )}
44          placeholder="username"
45        />
46        <AnimatePresence initial={false}>
47          {!isEditing ? (
48            <motion.span
49              key="pen"
50              layout="position"
51              initial={{ x: 50 }}
52              animate={{ x: 0 }}
53              exit={{ x: 50 }}
54              transition={{ type: "spring", bounce: 0.1 }}
55              onClick={() => {
56                setIsEditing(true);
57 
58                if (inputRef.current) inputRef.current.select();
59              }}
60              className="absolute right-1 flex items-center justify-center h-10 w-10 rounded-full bg-card/80 border border-[0.2px] hover:bg-card cursor-pointer text-muted-foreground"
61            >
62              <HugeiconsIcon icon={Edit01Icon} size={20} />
63            </motion.span>
64          ) : (
65            <motion.span
66              key="check"
67              layout="position"
68              initial={{ x: 50 }}
69              animate={{ x: 0 }}
70              exit={{ x: 50 }}
71// … truncated