[dyad] Refactored results into separate panels - wrote 3 file(s)
This commit is contained in:
[dyad]
@@ -20,32 +20,29 @@ interface HeadlinesDisplayProps {
|
|||||||
|
|
||||||
export function HeadlinesDisplay({ headlines }: HeadlinesDisplayProps) {
|
export function HeadlinesDisplay({ headlines }: HeadlinesDisplayProps) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="border rounded-lg max-h-80 overflow-y-auto relative">
|
||||||
<h3 className="font-semibold text-card-foreground mb-2">Headlines</h3>
|
<Table>
|
||||||
<div className="border rounded-lg max-h-80 overflow-y-auto relative">
|
<TableHeader className="sticky top-0 bg-muted/95 backdrop-blur-sm">
|
||||||
<Table>
|
<TableRow>
|
||||||
<TableHeader className="sticky top-0 bg-muted/95 backdrop-blur-sm">
|
<TableHead className="w-[80px]">Tag</TableHead>
|
||||||
<TableRow>
|
<TableHead>Text</TableHead>
|
||||||
<TableHead className="w-[80px]">Tag</TableHead>
|
<TableHead className="text-right w-[100px]">Length</TableHead>
|
||||||
<TableHead>Text</TableHead>
|
</TableRow>
|
||||||
<TableHead className="text-right w-[100px]">Length</TableHead>
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{headlines.map((headline, index) => (
|
||||||
|
<TableRow key={index}>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="secondary" className="uppercase">
|
||||||
|
{headline.tag}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-medium">{headline.text}</TableCell>
|
||||||
|
<TableCell className="text-right">{headline.length}</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
))}
|
||||||
<TableBody>
|
</TableBody>
|
||||||
{headlines.map((headline, index) => (
|
</Table>
|
||||||
<TableRow key={index}>
|
|
||||||
<TableCell>
|
|
||||||
<Badge variant="secondary" className="uppercase">
|
|
||||||
{headline.tag}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="font-medium">{headline.text}</TableCell>
|
|
||||||
<TableCell className="text-right">{headline.length}</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -121,165 +121,177 @@ export function MetaForm() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{!loading && metaData && (
|
{!loading && metaData && (
|
||||||
<Card className="w-full shadow-lg rounded-lg">
|
<div className="space-y-6">
|
||||||
<CardHeader>
|
<Card className="w-full shadow-lg rounded-lg">
|
||||||
<CardTitle className="text-xl text-card-foreground">
|
<CardHeader>
|
||||||
Extraction Results
|
<CardTitle className="text-xl text-card-foreground">
|
||||||
</CardTitle>
|
Meta Analysis
|
||||||
</CardHeader>
|
</CardTitle>
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<CardContent>
|
||||||
<div className="space-y-6">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
<div>
|
<div className="space-y-6">
|
||||||
<h3 className="font-semibold text-card-foreground mb-2">
|
|
||||||
SERP Preview
|
|
||||||
</h3>
|
|
||||||
<SerpPreview
|
|
||||||
title={editableTitle}
|
|
||||||
description={editableDescription}
|
|
||||||
url={url}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{metaData.image && (
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-card-foreground mb-2">
|
<h3 className="font-semibold text-card-foreground mb-2">
|
||||||
Preview Image
|
SERP Preview
|
||||||
</h3>
|
</h3>
|
||||||
<div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
|
<SerpPreview
|
||||||
{!imageError ? (
|
title={editableTitle}
|
||||||
<img
|
description={editableDescription}
|
||||||
src={metaData.image}
|
url={url}
|
||||||
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>
|
||||||
)}
|
|
||||||
|
|
||||||
{metaData.faq && metaData.faq.length > 0 && (
|
{metaData.image && (
|
||||||
<FaqDisplay faqs={metaData.faq} />
|
<div>
|
||||||
)}
|
<h3 className="font-semibold text-card-foreground mb-2">
|
||||||
</div>
|
Preview Image
|
||||||
<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>
|
</h3>
|
||||||
<LengthIndicator
|
<div className="aspect-video bg-muted rounded-md overflow-hidden relative flex items-center justify-center">
|
||||||
length={editableTitle.length}
|
{!imageError ? (
|
||||||
type="title"
|
<img
|
||||||
/>
|
src={metaData.image}
|
||||||
<span className="text-sm text-muted-foreground">
|
alt="Meta preview image"
|
||||||
{editableTitle.length} Characters
|
className="w-full h-full object-cover"
|
||||||
</span>
|
onError={() => setImageError(true)}
|
||||||
</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" />
|
<div className="flex flex-col items-center gap-2 text-muted-foreground">
|
||||||
|
<ImageOff className="h-8 w-8" />
|
||||||
|
<span>Image not available</span>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<span className="sr-only">
|
</div>
|
||||||
{isEditingTitle ? "Done editing" : "Edit"}
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
<p className="text-sm text-muted-foreground mt-1 mb-2">
|
|
||||||
The title of the page, ideally between 30 and 60
|
{metaData.faq && metaData.faq.length > 0 && (
|
||||||
characters.
|
<FaqDisplay faqs={metaData.faq} />
|
||||||
</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>
|
<div className="space-y-6">
|
||||||
<div className="flex items-center justify-between">
|
<div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center justify-between">
|
||||||
<h3 className="font-semibold text-card-foreground">
|
<div className="flex items-center gap-2">
|
||||||
Meta Description
|
<h3 className="font-semibold text-card-foreground">
|
||||||
</h3>
|
Meta Title
|
||||||
<LengthIndicator
|
</h3>
|
||||||
length={editableDescription.length}
|
<LengthIndicator
|
||||||
type="description"
|
length={editableTitle.length}
|
||||||
/>
|
type="title"
|
||||||
<span className="text-sm text-muted-foreground">
|
/>
|
||||||
{editableDescription.length} Characters
|
<span className="text-sm text-muted-foreground">
|
||||||
</span>
|
{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>
|
</div>
|
||||||
<div className="flex items-center">
|
<p className="text-sm text-muted-foreground mt-1 mb-2">
|
||||||
<CopyButton textToCopy={editableDescription} />
|
The title of the page, ideally between 30 and 60
|
||||||
<Button
|
characters.
|
||||||
variant="ghost"
|
</p>
|
||||||
size="icon"
|
{isEditingTitle ? (
|
||||||
onClick={() =>
|
<Input
|
||||||
setIsEditingDescription(!isEditingDescription)
|
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="h-8 w-8"
|
className="w-full min-h-[100px]"
|
||||||
>
|
placeholder="Meta Description"
|
||||||
{isEditingDescription ? (
|
/>
|
||||||
<Check className="h-4 w-4" />
|
) : (
|
||||||
) : (
|
<p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
|
||||||
<Edit className="h-4 w-4" />
|
{editableDescription || "Not found"}
|
||||||
)}
|
</p>
|
||||||
<span className="sr-only">
|
)}
|
||||||
{isEditingDescription ? "Done editing" : "Edit"}
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</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>
|
</div>
|
||||||
{metaData.headlines && metaData.headlines.length > 0 && (
|
|
||||||
<HeadlinesDisplay headlines={metaData.headlines} />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
|
||||||
|
{metaData.headlines && metaData.headlines.length > 0 && (
|
||||||
|
<Card className="w-full shadow-lg rounded-lg">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl text-card-foreground">
|
||||||
|
Headlines
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<HeadlinesDisplay headlines={metaData.headlines} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,76 +5,73 @@ import { Skeleton } from "@/components/ui/skeleton";
|
|||||||
|
|
||||||
export function ResultsSkeleton() {
|
export function ResultsSkeleton() {
|
||||||
return (
|
return (
|
||||||
<Card className="w-full shadow-lg rounded-lg">
|
<div className="space-y-6">
|
||||||
<CardHeader>
|
<Card className="w-full shadow-lg rounded-lg">
|
||||||
<Skeleton className="h-6 w-48" />
|
<CardHeader>
|
||||||
</CardHeader>
|
<Skeleton className="h-6 w-48" />
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<CardContent>
|
||||||
<div className="space-y-6">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
<div>
|
<div className="space-y-6">
|
||||||
<Skeleton className="h-5 w-32 mb-2" />
|
<div>
|
||||||
<div className="p-4 border rounded-lg bg-muted/50 w-full">
|
<Skeleton className="h-5 w-32 mb-2" />
|
||||||
<div className="flex items-center gap-2">
|
<div className="p-4 border rounded-lg bg-muted/50 w-full">
|
||||||
<Skeleton className="w-7 h-7 rounded-full" />
|
<div className="flex items-center gap-2">
|
||||||
<div className="space-y-1.5">
|
<Skeleton className="w-7 h-7 rounded-full" />
|
||||||
<Skeleton className="h-4 w-24" />
|
<div className="space-y-1.5">
|
||||||
<Skeleton className="h-3 w-40" />
|
<Skeleton className="h-4 w-24" />
|
||||||
|
<Skeleton className="h-3 w-40" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<Skeleton className="h-6 w-full mt-3" />
|
||||||
|
<Skeleton className="h-4 w-full mt-2" />
|
||||||
|
<Skeleton className="h-4 w-3/4 mt-1.5" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-5 w-32 mb-2" />
|
||||||
|
<Skeleton className="aspect-video w-full rounded-md" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-5 w-40 mb-3" />
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Skeleton className="h-10 w-full" />
|
||||||
|
<Skeleton className="h-10 w-full" />
|
||||||
</div>
|
</div>
|
||||||
<Skeleton className="h-6 w-full mt-3" />
|
|
||||||
<Skeleton className="h-4 w-full mt-2" />
|
|
||||||
<Skeleton className="h-4 w-3/4 mt-1.5" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="space-y-6">
|
||||||
<Skeleton className="h-5 w-32 mb-2" />
|
<div>
|
||||||
<Skeleton className="aspect-video w-full rounded-md" />
|
<div className="flex items-center justify-between mb-2">
|
||||||
</div>
|
<Skeleton className="h-5 w-24" />
|
||||||
<div>
|
</div>
|
||||||
<Skeleton className="h-5 w-40 mb-3" />
|
<Skeleton className="h-4 w-full mb-2" />
|
||||||
<div className="space-y-2">
|
|
||||||
<Skeleton className="h-10 w-full" />
|
|
||||||
<Skeleton className="h-10 w-full" />
|
|
||||||
<Skeleton className="h-10 w-full" />
|
<Skeleton className="h-10 w-full" />
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<Skeleton className="h-5 w-36" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-4 w-full mb-2" />
|
||||||
|
<Skeleton className="h-24 w-full" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-6">
|
</CardContent>
|
||||||
<div>
|
</Card>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<Card>
|
||||||
<Skeleton className="h-5 w-24" />
|
<CardHeader>
|
||||||
<div className="flex items-center gap-2">
|
<Skeleton className="h-6 w-32" />
|
||||||
<Skeleton className="h-8 w-8" />
|
</CardHeader>
|
||||||
<Skeleton className="h-8 w-8" />
|
<CardContent>
|
||||||
</div>
|
<div className="border rounded-lg p-2 space-y-2">
|
||||||
</div>
|
<Skeleton className="h-8 w-full" />
|
||||||
<Skeleton className="h-4 w-full mb-2" />
|
<Skeleton className="h-8 w-full" />
|
||||||
<Skeleton className="h-10 w-full" />
|
<Skeleton className="h-8 w-full" />
|
||||||
</div>
|
<Skeleton className="h-8 w-full" />
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<Skeleton className="h-5 w-36" />
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Skeleton className="h-8 w-8" />
|
|
||||||
<Skeleton className="h-8 w-8" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Skeleton className="h-4 w-full mb-2" />
|
|
||||||
<Skeleton className="h-24 w-full" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Skeleton className="h-5 w-24 mb-2" />
|
|
||||||
<div className="border rounded-lg p-2 space-y-2">
|
|
||||||
<Skeleton className="h-8 w-full" />
|
|
||||||
<Skeleton className="h-8 w-full" />
|
|
||||||
<Skeleton className="h-8 w-full" />
|
|
||||||
<Skeleton className="h-8 w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user