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

[dyad] Added preview image and copy buttons - wrote 4 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 12:09:52 +01:00
parent 9c1c4e1581
commit 4163372a17
4 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,10 +7,12 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Globe } from "lucide-react";
import { extractMetaData } from "@/app/actions";
import { LengthIndicator } from "./length-indicator";
import { CopyButton } from "./copy-button";
interface MetaData {
title: string;
description: string;
image?: string | null;
}
export function MetaForm() {
@@ -40,7 +42,10 @@ export function MetaForm() {
return (
<div className="w-full space-y-6">
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row items-center gap-3">
<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
@@ -51,7 +56,11 @@ export function MetaForm() {
className="pl-10 h-12 text-base rounded-lg shadow-sm"
/>
</div>
<Button type="submit" disabled={loading} className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all">
<Button
type="submit"
disabled={loading}
className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all"
>
{loading ? "Extracting..." : "Extract"}
</Button>
</form>
@@ -67,28 +76,54 @@ export function MetaForm() {
{metaData && (
<Card className="w-full shadow-lg rounded-lg">
<CardHeader>
<CardTitle className="text-xl text-card-foreground">Extraction Results</CardTitle>
<CardTitle className="text-xl text-card-foreground">
Extraction Results
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="space-y-6">
{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">
<img
src={metaData.image}
alt="Meta preview image"
className="w-full h-full object-cover"
/>
</div>
</div>
)}
<div>
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-card-foreground">Meta Title</h3>
<LengthIndicator
length={metaData.title.length}
type="title"
/>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<h3 className="font-semibold text-card-foreground">
Meta Title
</h3>
<LengthIndicator
length={metaData.title.length}
type="title"
/>
</div>
<CopyButton textToCopy={metaData.title} />
</div>
<p className="text-muted-foreground bg-muted p-3 rounded-md">
{metaData.title || "Not found"}
</p>
</div>
<div>
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-card-foreground">Meta Description</h3>
<LengthIndicator
length={metaData.description.length}
type="description"
/>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<h3 className="font-semibold text-card-foreground">
Meta Description
</h3>
<LengthIndicator
length={metaData.description.length}
type="description"
/>
</div>
<CopyButton textToCopy={metaData.description} />
</div>
<p className="text-muted-foreground bg-muted p-3 rounded-md">
{metaData.description || "Not found"}