InlineEdit

import { InlineEdit } from "@fanvue/ui";
import type { InlineEditProps, InlineEditSize } from "@fanvue/ui";

import { useState } from "react";
import { InlineEdit } from "@fanvue/ui";

function Example() {
  const [value, setValue] = useState("New folder");
  return <InlineEdit value={value} onSubmit={setValue} />;
}

import { InlineEdit } from "@fanvue/ui";

<InlineEdit disabled value="Locked folder" onSubmit={() => {}} />

import { useState } from "react";
import { InlineEdit } from "@fanvue/ui";

function Example() {
  const [value, setValue] = useState("Inbox folder");
  return <InlineEdit size="32" value={value} onSubmit={setValue} />;
}

import { useState } from "react";
import { InlineEdit, PlusIcon } from "@fanvue/ui";

function Example() {
  const [value, setValue] = useState("New folder");
  return <InlineEdit
           leftIcon={<PlusIcon className="size-4" />}
           value={value}
           onSubmit={setValue}
         />;
}

import { useState } from "react";
import { InlineEdit } from "@fanvue/ui";

function Example() {
  const [folders, setFolders] = useState([
    { id: "inbox", name: "Inbox" },
    { id: "drafts", name: "Drafts" },
    { id: "sent", name: "Sent" },
  ]);
  return (
    <div className="flex flex-wrap gap-2">
      {folders.map((folder) => (
        <InlineEdit
          key={folder.id}
          value={folder.name}
          onSubmit={(next) =>
            setFolders((prev) =>
              prev.map((current) =>
                current.id === folder.id ? { ...current, name: next } : current,
              ),
            )
          }
        />
      ))}
    </div>
  );
}