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

[dyad] Made meta tags editable for testing - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 12:16:10 +01:00
parent ed3b1af8a0
commit 4e082a9b67
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,9 @@
"use client"; "use client";
import { useState } from "react"; import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Globe } from "lucide-react"; import { Globe } from "lucide-react";
import { extractMetaData } from "@/app/actions"; import { extractMetaData } from "@/app/actions";
@@ -20,6 +21,16 @@ export function MetaForm() {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [metaData, setMetaData] = useState<MetaData | null>(null); const [metaData, setMetaData] = useState<MetaData | null>(null);
const [editableTitle, setEditableTitle] = useState("");
const [editableDescription, setEditableDescription] = useState("");
useEffect(() => {
if (metaData) {
setEditableTitle(metaData.title);
setEditableDescription(metaData.description);
}
}, [metaData]);
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
setLoading(true); setLoading(true);
@@ -96,38 +107,44 @@ export function MetaForm() {
</div> </div>
)} )}
<div> <div>
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h3 className="font-semibold text-card-foreground"> <h3 className="font-semibold text-card-foreground">
Meta Title Meta Title
</h3> </h3>
<LengthIndicator <LengthIndicator
length={metaData.title.length} length={editableTitle.length}
type="title" type="title"
/> />
</div> </div>
<CopyButton textToCopy={metaData.title} /> <CopyButton textToCopy={editableTitle} />
</div> </div>
<p className="text-muted-foreground bg-muted p-3 rounded-md"> <Input
{metaData.title || "Not found"} value={editableTitle}
</p> onChange={(e) => setEditableTitle(e.target.value)}
className="w-full bg-muted"
placeholder="Meta Title"
/>
</div> </div>
<div> <div>
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h3 className="font-semibold text-card-foreground"> <h3 className="font-semibold text-card-foreground">
Meta Description Meta Description
</h3> </h3>
<LengthIndicator <LengthIndicator
length={metaData.description.length} length={editableDescription.length}
type="description" type="description"
/> />
</div> </div>
<CopyButton textToCopy={metaData.description} /> <CopyButton textToCopy={editableDescription} />
</div> </div>
<p className="text-muted-foreground bg-muted p-3 rounded-md"> <Textarea
{metaData.description || "Not found"} value={editableDescription}
</p> onChange={(e) => setEditableDescription(e.target.value)}
className="w-full bg-muted min-h-[100px]"
placeholder="Meta Description"
/>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>