366 lines
14 KiB
TypeScript
366 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Globe,
|
|
Edit,
|
|
Check,
|
|
Loader2,
|
|
X,
|
|
ImageOff,
|
|
Search,
|
|
} from "lucide-react";
|
|
import { extractMetaData, type HeadlineNode, type ImageAltData } from "@/app/actions";
|
|
import { LengthIndicator } from "./length-indicator";
|
|
import { CopyButton } from "./copy-button";
|
|
import { SerpPreview } from "./serp-preview";
|
|
import { ResultsSkeleton } from "./results-skeleton";
|
|
import { FaqDisplay } from "./faq-display";
|
|
import { HeadlineTree } from "./headline-tree";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { ImageAltDisplay } from "./image-alt-display";
|
|
|
|
interface MetaData {
|
|
title: string;
|
|
description: string;
|
|
image?: string | null;
|
|
faq?: { question: string; answer: string }[] | null;
|
|
headlines?: HeadlineNode[] | null;
|
|
keyword?: string | null;
|
|
keywordCount?: number | null;
|
|
images?: ImageAltData[] | null;
|
|
}
|
|
|
|
export function MetaForm() {
|
|
const [url, setUrl] = useState("");
|
|
const [keyword, setKeyword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [metaData, setMetaData] = useState<MetaData | null>(null);
|
|
|
|
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
|
const [isEditingDescription, setIsEditingDescription] = useState(false);
|
|
|
|
const [editableTitle, setEditableTitle] = useState("");
|
|
const [editableDescription, setEditableDescription] = useState("");
|
|
const [imageError, setImageError] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (metaData) {
|
|
setEditableTitle(metaData.title);
|
|
setEditableDescription(metaData.description);
|
|
setImageError(false);
|
|
}
|
|
}, [metaData]);
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
setMetaData(null);
|
|
setIsEditingTitle(false);
|
|
setIsEditingDescription(false);
|
|
setImageError(false);
|
|
|
|
const result = await extractMetaData(url, keyword);
|
|
|
|
if (result.error) {
|
|
setError(result.error);
|
|
} else if (result.data) {
|
|
setMetaData(result.data);
|
|
}
|
|
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setUrl("");
|
|
setKeyword("");
|
|
setLoading(false);
|
|
setError(null);
|
|
setMetaData(null);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full space-y-6">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="flex flex-col sm:flex-row items-center gap-3"
|
|
>
|
|
<div className="relative w-full">
|
|
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
|
<Input
|
|
name="url"
|
|
type="text"
|
|
placeholder="example.com"
|
|
required
|
|
className="pl-10 h-12 text-base rounded-lg shadow-sm"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="relative w-full sm:w-auto">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
|
<Input
|
|
name="keyword"
|
|
type="text"
|
|
placeholder="Keyword (optional)"
|
|
className="pl-10 h-12 text-base rounded-lg shadow-sm sm:w-64"
|
|
value={keyword}
|
|
onChange={(e) => setKeyword(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all flex items-center gap-2"
|
|
>
|
|
{loading && <Loader2 className="h-5 w-5 animate-spin" />}
|
|
{loading ? "Extracting..." : "Extract"}
|
|
</Button>
|
|
{(url || metaData || error) && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handleClear}
|
|
className="h-12 w-12"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
<span className="sr-only">Clear</span>
|
|
</Button>
|
|
)}
|
|
</form>
|
|
|
|
{loading && <ResultsSkeleton />}
|
|
|
|
{!loading && error && (
|
|
<Card className="border-destructive bg-destructive/10">
|
|
<CardContent className="p-4">
|
|
<p className="text-destructive text-center">{error}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{!loading && metaData && (
|
|
<Tabs defaultValue="analysis" className="w-full">
|
|
<TabsList className="mb-4">
|
|
<TabsTrigger value="analysis">Meta Analysis</TabsTrigger>
|
|
{metaData.headlines && metaData.headlines.length > 0 && (
|
|
<TabsTrigger value="headlines">Headlines</TabsTrigger>
|
|
)}
|
|
{metaData.images && metaData.images.length > 0 && (
|
|
<TabsTrigger value="images">Images</TabsTrigger>
|
|
)}
|
|
{metaData.faq && metaData.faq.length > 0 && (
|
|
<TabsTrigger value="faq">FAQ</TabsTrigger>
|
|
)}
|
|
</TabsList>
|
|
|
|
<TabsContent value="analysis">
|
|
<Card className="w-full shadow-lg rounded-lg">
|
|
<CardContent className="p-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="font-semibold text-card-foreground mb-2">
|
|
SERP Preview
|
|
</h3>
|
|
<SerpPreview
|
|
title={editableTitle}
|
|
description={editableDescription}
|
|
url={url}
|
|
/>
|
|
</div>
|
|
{metaData.image && (
|
|
<div>
|
|
<h3 className="font-semibold text-card-foreground mb-2">
|
|
Preview Image
|
|
</h3>
|
|
<div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
|
|
{!imageError ? (
|
|
<img
|
|
src={metaData.image}
|
|
alt="Meta preview image"
|
|
className="w-full h-full object-cover"
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
) : (
|
|
<div className="flex flex-col items-center gap-2 text-muted-foreground">
|
|
<ImageOff className="h-8 w-8" />
|
|
<span>Image not available</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="font-semibold text-card-foreground">
|
|
Meta Title
|
|
</h3>
|
|
<LengthIndicator
|
|
length={editableTitle.length}
|
|
type="title"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{editableTitle.length} Characters
|
|
</span>
|
|
</div>
|
|
<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>
|
|
<p className="text-sm text-muted-foreground mt-1 mb-2">
|
|
The title of the page, ideally between 30 and 60
|
|
characters.
|
|
</p>
|
|
{isEditingTitle ? (
|
|
<Input
|
|
value={editableTitle}
|
|
onChange={(e) => setEditableTitle(e.target.value)}
|
|
className="w-full"
|
|
placeholder="Meta Title"
|
|
/>
|
|
) : (
|
|
<p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
|
|
{editableTitle || "Not found"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="font-semibold text-card-foreground">
|
|
Meta Description
|
|
</h3>
|
|
<LengthIndicator
|
|
length={editableDescription.length}
|
|
type="description"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{editableDescription.length} Characters
|
|
</span>
|
|
</div>
|
|
<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>
|
|
<p className="text-sm text-muted-foreground mt-1 mb-2">
|
|
A brief summary of the page's content, ideally between
|
|
120 and 158 characters.
|
|
</p>
|
|
{isEditingDescription ? (
|
|
<Textarea
|
|
value={editableDescription}
|
|
onChange={(e) =>
|
|
setEditableDescription(e.target.value)
|
|
}
|
|
className="w-full min-h-[100px]"
|
|
placeholder="Meta Description"
|
|
/>
|
|
) : (
|
|
<p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
|
|
{editableDescription || "Not found"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{metaData.keyword &&
|
|
typeof metaData.keywordCount === "number" && (
|
|
<div>
|
|
<h3 className="font-semibold text-card-foreground">
|
|
Keyword: "{metaData.keyword}"
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mt-1 mb-2">
|
|
The number of times this keyword appears on the
|
|
page.
|
|
</p>
|
|
<div className="text-foreground bg-muted p-3 rounded-md min-h-[40px] flex items-center">
|
|
<span className="font-mono text-2xl font-bold">
|
|
{metaData.keywordCount}
|
|
</span>
|
|
<span className="ml-2 text-muted-foreground">
|
|
occurrences
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{metaData.headlines && metaData.headlines.length > 0 && (
|
|
<TabsContent value="headlines">
|
|
<Card className="w-full shadow-lg rounded-lg">
|
|
<CardContent className="p-0">
|
|
<HeadlineTree headlines={metaData.headlines} />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
)}
|
|
|
|
{metaData.images && metaData.images.length > 0 && (
|
|
<TabsContent value="images">
|
|
<Card className="w-full shadow-lg rounded-lg">
|
|
<CardContent className="p-6">
|
|
<ImageAltDisplay images={metaData.images} />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
)}
|
|
|
|
{metaData.faq && metaData.faq.length > 0 && (
|
|
<TabsContent value="faq">
|
|
<Card className="w-full shadow-lg rounded-lg">
|
|
<CardContent className="p-6">
|
|
<FaqDisplay faqs={metaData.faq} />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
)}
|
|
</Tabs>
|
|
)}
|
|
</div>
|
|
);
|
|
} |