增加可编辑标题组件。

src/components/EditableTitle.module.css

@@ -0,0 +1,17 @@
+@layer components {
+  .editable_layout {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-m);
+    :where(h3, input) {
+      font-size: var(--font-size-xl);
+      font-weight: 700;
+      line-height: 1em;
+    }
+    h3 {
+      border: 1px solid transparent;
+      padding: var(--spacing-s) var(--spacing-m);
+    }
+  }
+}

src/components/EditableTitle.tsx

@@ -0,0 +1,43 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { useRef, useState } from 'react';
+import styles from './EditableTitle.module.css';
+
+type EditableTitleProps = {
+  title: string;
+  onChange?: (newTitle: string) => void;
+};
+
+export function EditableTitle({ title, onChange }: EditableTitleProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
+  const cancelEdit = () => {
+    setIsEditing(false);
+    formRef.current?.reset();
+  };
+  const handleSubmit = (data: FormData) => {
+    const newTitle = data.get('title') as string;
+    if (newTitle !== title && onChange) {
+      onChange?.(newTitle);
+    }
+    cancelEdit();
+  };
+
+  return isEditing ? (
+    <form className={styles.editable_layout} action={handleSubmit} ref={formRef}>
+      <input type="text" name="title" defaultValue={title} />
+      <div className="action_icon success" onClick={() => formRef.current?.requestSubmit()}>
+        <Icon icon="tabler:check" />
+      </div>
+      <div className="action_icon danger" onClick={cancelEdit}>
+        <Icon icon="tabler:x" />
+      </div>
+    </form>
+  ) : (
+    <div className={styles.editable_layout}>
+      <h3>{title}</h3>
+      <div className="action_icon" onClick={() => setIsEditing(true)}>
+        <Icon icon="tabler:edit" />
+      </div>
+    </div>
+  );
+}