140 lines
4.5 KiB
TypeScript
140 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
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";
|
|
import { ResultsSkeleton } from "./results-skeleton";
|
|
|
|
interface MetaData {
|
|
title: string;
|
|
description: string;
|
|
image?: string | null;
|
|
}
|
|
|
|
export function MetaForm() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [metaData, setMetaData] = useState<MetaData | null>(null);
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
setMetaData(null);
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
const url = formData.get("url") as string;
|
|
|
|
const result = await extractMetaData(url);
|
|
|
|
if (result.error) {
|
|
setError(result.error);
|
|
} else if (result.data) {
|
|
setMetaData(result.data);
|
|
}
|
|
|
|
setLoading(false);
|
|
};
|
|
|
|
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="url"
|
|
placeholder="https://example.com"
|
|
required
|
|
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 hover:scale-105 active:scale-100"
|
|
>
|
|
{loading ? "Extracting..." : "Extract"}
|
|
</Button>
|
|
</form>
|
|
|
|
{loading && <ResultsSkeleton />}
|
|
|
|
{error && !loading && (
|
|
<Card className="border-destructive bg-destructive/10">
|
|
<CardContent className="p-4">
|
|
<p className="text-destructive text-center font-medium">{error}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{metaData && !loading && (
|
|
<Card className="w-full shadow-lg rounded-lg">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl text-card-foreground">
|
|
Extraction Results
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<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 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 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"}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
} |