[dyad] Created a meta tag extractor app - wrote 5 file(s), added cheerio package(s)

2026-01-20 11:58:47 +01:00
parent ebe2e4cec4
commit 3f4cd7443c
5 changed files with 329 additions and 4 deletions
--- a/src/components/meta-form.tsx
+++ b/src/components/meta-form.tsx
@@ -0,0 +1,89 @@
+"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";
+
+interface MetaData {
+  title: string;
+  description: string;
+}
+
+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-gray-400" />
+          <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 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold transition-all">
+          {loading ? "Extracting..." : "Extract"}
+        </Button>
+      </form>
+
+      {error && (
+        <Card className="bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-500/30">
+          <CardContent className="p-4">
+            <p className="text-red-600 dark:text-red-400 text-center">{error}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {metaData && (
+        <Card className="w-full shadow-lg rounded-lg">
+          <CardHeader>
+            <CardTitle className="text-xl text-gray-800 dark:text-white">Extraction Results</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <h3 className="font-semibold text-gray-700 dark:text-gray-300">Meta Title</h3>
+              <p className="text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 p-3 rounded-md mt-1">
+                {metaData.title || "Not found"}
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold text-gray-700 dark:text-gray-300">Meta Description</h3>
+              <p className="text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 p-3 rounded-md mt-1">
+                {metaData.description || "Not found"}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}