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

[dyad] Organized results into a tabbed view - wrote 3 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 14:13:19 +01:00
parent 06219f7883
commit 879e7dff3b
3 changed files with 181 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/faq-display.tsx
View File

@@ -16,10 +16,6 @@ interface FaqDisplayProps {
export function FaqDisplay({ faqs }: FaqDisplayProps) { export function FaqDisplay({ faqs }: FaqDisplayProps) {
return ( return (
<div>
<h3 className="font-semibold text-card-foreground mb-2">
FAQ Structured Data
</h3>
<Accordion type="single" collapsible className="w-full"> <Accordion type="single" collapsible className="w-full">
{faqs.map((faq, index) => ( {faqs.map((faq, index) => (
<AccordionItem value={`item-${index}`} key={index}> <AccordionItem value={`item-${index}`} key={index}>
@@ -28,6 +24,5 @@ export function FaqDisplay({ faqs }: FaqDisplayProps) {
</AccordionItem> </AccordionItem>
))} ))}
</Accordion> </Accordion>
</div>
); );
} }

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

@@ -4,7 +4,7 @@ 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 { 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 { Globe, Edit, Check, Loader2, X, ImageOff } from "lucide-react";
import { extractMetaData, type HeadlineNode } from "@/app/actions"; import { extractMetaData, type HeadlineNode } from "@/app/actions";
import { LengthIndicator } from "./length-indicator"; import { LengthIndicator } from "./length-indicator";
@@ -13,6 +13,7 @@ import { SerpPreview } from "./serp-preview";
import { ResultsSkeleton } from "./results-skeleton"; import { ResultsSkeleton } from "./results-skeleton";
import { FaqDisplay } from "./faq-display"; import { FaqDisplay } from "./faq-display";
import { HeadlineTree } from "./headline-tree"; import { HeadlineTree } from "./headline-tree";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
interface MetaData { interface MetaData {
title: string; title: string;
@@ -121,14 +122,20 @@ export function MetaForm() {
)} )}
{!loading && metaData && ( {!loading && metaData && (
<div className="space-y-6"> <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>
<TabsContent value="analysis">
<Card className="w-full shadow-lg rounded-lg"> <Card className="w-full shadow-lg rounded-lg">
<CardHeader> <CardContent className="p-6">
<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="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
@@ -141,7 +148,6 @@ export function MetaForm() {
url={url} url={url}
/> />
</div> </div>
{metaData.image && ( {metaData.image && (
<div> <div>
<h3 className="font-semibold text-card-foreground mb-2"> <h3 className="font-semibold text-card-foreground mb-2">
@@ -164,10 +170,6 @@ export function MetaForm() {
</div> </div>
</div> </div>
)} )}
{metaData.faq && metaData.faq.length > 0 && (
<FaqDisplay faqs={metaData.faq} />
)}
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
@@ -256,8 +258,8 @@ export function MetaForm() {
</div> </div>
</div> </div>
<p className="text-sm text-muted-foreground mt-1 mb-2"> <p className="text-sm text-muted-foreground mt-1 mb-2">
A brief summary of the page's content, ideally between 120 A brief summary of the page's content, ideally between
and 158 characters. 120 and 158 characters.
</p> </p>
{isEditingDescription ? ( {isEditingDescription ? (
<Textarea <Textarea
@@ -278,20 +280,28 @@ export function MetaForm() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</TabsContent>
{metaData.headlines && metaData.headlines.length > 0 && ( {metaData.headlines && metaData.headlines.length > 0 && (
<TabsContent value="headlines">
<Card className="w-full shadow-lg rounded-lg"> <Card className="w-full shadow-lg rounded-lg">
<CardHeader> <CardContent className="p-6">
<CardTitle className="text-xl text-card-foreground">
Headlines Structure
</CardTitle>
</CardHeader>
<CardContent>
<HeadlineTree headlines={metaData.headlines} /> <HeadlineTree headlines={metaData.headlines} />
</CardContent> </CardContent>
</Card> </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> </div>
); );

38
src/components/results-skeleton.tsx
View File

@@ -1,16 +1,18 @@
"use client"; "use client";
import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
export function ResultsSkeleton() { export function ResultsSkeleton() {
return ( return (
<div className="space-y-6"> <div className="space-y-4">
<div className="flex items-center gap-2">
<Skeleton className="h-10 w-28 rounded-md" />
<Skeleton className="h-10 w-24 rounded-md" />
<Skeleton className="h-10 w-20 rounded-md" />
</div>
<Card className="w-full shadow-lg rounded-lg"> <Card className="w-full shadow-lg rounded-lg">
<CardHeader> <CardContent className="p-6">
<Skeleton className="h-6 w-48" />
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
@@ -32,13 +34,6 @@ export function ResultsSkeleton() {
<Skeleton className="h-5 w-32 mb-2" /> <Skeleton className="h-5 w-32 mb-2" />
<Skeleton className="aspect-video w-full rounded-md" /> <Skeleton className="aspect-video w-full rounded-md" />
</div> </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>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
@@ -59,23 +54,6 @@ export function ResultsSkeleton() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card>
<CardHeader>
<Skeleton className="h-6 w-40" />
</CardHeader>
<CardContent>
<div className="border rounded-lg p-2 space-y-2">
<Skeleton className="h-8 w-full" />
<div className="ml-6">
<Skeleton className="h-8 w-[90%]" />
</div>
<div className="ml-6">
<Skeleton className="h-8 w-[90%]" />
</div>
<Skeleton className="h-8 w-full" />
</div>
</CardContent>
</Card>
</div> </div>
); );
} }