pascallinxweiler/Metify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Added field-specific edit buttons - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 13:14:00 +01:00
parent ed46d8e9cd
commit 39c18fc406
1 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/meta-form.tsx
View File

@@ -20,7 +20,9 @@ export function MetaForm() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [metaData, setMetaData] = useState<MetaData | null>(null);
const [isEditing, setIsEditing] = useState(false);
const [isEditingTitle, setIsEditingTitle] = useState(false);
const [isEditingDescription, setIsEditingDescription] = useState(false);
const [editableTitle, setEditableTitle] = useState("");
const [editableDescription, setEditableDescription] = useState("");
@@ -37,7 +39,8 @@ export function MetaForm() {
setLoading(true);
setError(null);
setMetaData(null);
setIsEditing(false);
setIsEditingTitle(false);
setIsEditingDescription(false);
const formData = new FormData(event.currentTarget);
const url = formData.get("url") as string;
@@ -89,28 +92,9 @@ export function MetaForm() {
{metaData && (
<Card className="w-full shadow-lg rounded-lg">
<CardHeader>
<div className="flex justify-between items-center">
<CardTitle className="text-xl text-card-foreground">
Extraction Results
</CardTitle>
<Button
variant="outline"
size="sm"
onClick={() => setIsEditing(!isEditing)}
>
{isEditing ? (
<>
<Check className="mr-2 h-4 w-4" />
Done
</>
) : (
<>
<Edit className="mr-2 h-4 w-4" />
Edit
</>
)}
</Button>
</div>
<CardTitle className="text-xl text-card-foreground">
Extraction Results
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{metaData.image && (
@@ -138,9 +122,24 @@ export function MetaForm() {
type="title"
/>
</div>
<CopyButton textToCopy={editableTitle} />
<div className="flex items-center">
<CopyButton textToCopy={editableTitle} />
<Button
variant="ghost"
size="icon"
onClick={() => setIsEditingTitle(!isEditingTitle)}
className="h-8 w-8"
>
{isEditingTitle ? (
<Check className="h-4 w-4" />
) : (
<Edit className="h-4 w-4" />
)}
<span className="sr-only">{isEditingTitle ? "Done editing" : "Edit"}</span>
</Button>
</div>
</div>
{isEditing ? (
{isEditingTitle ? (
<Input
value={editableTitle}
onChange={(e) => setEditableTitle(e.target.value)}
@@ -164,9 +163,24 @@ export function MetaForm() {
type="description"
/>
</div>
<CopyButton textToCopy={editableDescription} />
<div className="flex items-center">
<CopyButton textToCopy={editableDescription} />
<Button
variant="ghost"
size="icon"
onClick={() => setIsEditingDescription(!isEditingDescription)}
className="h-8 w-8"
>
{isEditingDescription ? (
<Check className="h-4 w-4" />
) : (
<Edit className="h-4 w-4" />
)}
<span className="sr-only">{isEditingDescription ? "Done editing" : "Edit"}</span>
</Button>
</div>
</div>
{isEditing ? (
{isEditingDescription ? (
<Textarea
value={editableDescription}
onChange={(e) => setEditableDescription(e.target.value)}