[dyad] Organized results into a tabbed view - wrote 3 file(s)
This commit is contained in:
[dyad]
@@ -4,7 +4,7 @@ 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, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Globe, Edit, Check, Loader2, X, ImageOff } from "lucide-react";
|
||||
import { extractMetaData, type HeadlineNode } from "@/app/actions";
|
||||
import { LengthIndicator } from "./length-indicator";
|
||||
@@ -13,6 +13,7 @@ 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";
|
||||
|
||||
interface MetaData {
|
||||
title: string;
|
||||
@@ -121,177 +122,186 @@ export function MetaForm() {
|
||||
)}
|
||||
|
||||
{!loading && metaData && (
|
||||
<div className="space-y-6">
|
||||
<Card className="w-full shadow-lg rounded-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl text-card-foreground">
|
||||
Meta Analysis
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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>
|
||||
<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.faq && metaData.faq.length > 0 && (
|
||||
<TabsTrigger value="faq">FAQ</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
|
||||
{metaData.image && (
|
||||
<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">
|
||||
Preview Image
|
||||
SERP Preview
|
||||
</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)}
|
||||
<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"
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
|
||||
{metaData.faq && metaData.faq.length > 0 && (
|
||||
<FaqDisplay faqs={metaData.faq} />
|
||||
)}
|
||||
</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 className="text-sm text-muted-foreground">
|
||||
{editableTitle.length} Characters
|
||||
</span>
|
||||
</Button>
|
||||
</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>
|
||||
<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 className="text-sm text-muted-foreground mt-1 mb-2">
|
||||
The title of the page, ideally between 30 and 60
|
||||
characters.
|
||||
</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"
|
||||
{isEditingTitle ? (
|
||||
<Input
|
||||
value={editableTitle}
|
||||
onChange={(e) => setEditableTitle(e.target.value)}
|
||||
className="w-full"
|
||||
placeholder="Meta Title"
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{editableDescription.length} Characters
|
||||
</span>
|
||||
) : (
|
||||
<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>
|
||||
<div className="flex items-center">
|
||||
<CopyButton textToCopy={editableDescription} />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
setIsEditingDescription(!isEditingDescription)
|
||||
<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"
|
||||
>
|
||||
{isEditingDescription ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Edit className="h-4 w-4" />
|
||||
)}
|
||||
<span className="sr-only">
|
||||
{isEditingDescription ? "Done editing" : "Edit"}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{metaData.headlines && metaData.headlines.length > 0 && (
|
||||
<Card className="w-full shadow-lg rounded-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl text-card-foreground">
|
||||
Headlines Structure
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<HeadlineTree headlines={metaData.headlines} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{metaData.headlines && metaData.headlines.length > 0 && (
|
||||
<TabsContent value="headlines">
|
||||
<Card className="w-full shadow-lg rounded-lg">
|
||||
<CardContent className="p-6">
|
||||
<HeadlineTree headlines={metaData.headlines} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user