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

src/app/actions.ts

@@ -35,12 +35,15 @@ export async function extractMetaData(url: string) {
       $('meta[property="og:description"]').attr("content") ||
       $('meta[name="description"]').attr("content") ||
       "No description found";
+    const image = $('meta[property="og:image"]').attr("content") || null;
 
-    return { data: { title, description } };
+    return { data: { title, description, image } };
   } catch (error) {
     console.error(error);
-    if (error instanceof Error && error.message.includes('Invalid URL')) {
+    if (error instanceof Error && error.message.includes("Invalid URL")) {
-        return { error: "The provided URL is not valid. Please check and try again." };
+      return {
+        error: "The provided URL is not valid. Please check and try again.",
+      };
     }
     return { error: "An unexpected error occurred while fetching the URL." };
   }

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -35,6 +36,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           {children}
+          <Toaster richColors />
         </ThemeProvider>
       </body>
     </html>

src/components/copy-button.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Check, Copy } from "lucide-react";
+import { toast } from "sonner";
+
+interface CopyButtonProps {
+  textToCopy: string;
+}
+
+export function CopyButton({ textToCopy }: CopyButtonProps) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = () => {
+    if (!textToCopy || textToCopy === "Not found") return;
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      setIsCopied(true);
+      toast.success("Copied to clipboard!");
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleCopy}
+      className="h-8 w-8"
+    >
+      {isCopied ? (
+        <Check className="h-4 w-4 text-green-500" />
+      ) : (
+        <Copy className="h-4 w-4" />
+      )}
+      <span className="sr-only">Copy</span>
+    </Button>
+  );
+}

src/components/meta-form.tsx

@@ -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">
+              <div className="flex items-center justify-between mb-1">
-                <h3 className="font-semibold text-card-foreground">Meta Title</h3>
+                <div className="flex items-center gap-2">
-                <LengthIndicator
+                  <h3 className="font-semibold text-card-foreground">
-                  length={metaData.title.length}
+                    Meta Title
-                  type="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">
+              <div className="flex items-center justify-between mb-1">
-                <h3 className="font-semibold text-card-foreground">Meta Description</h3>
+                <div className="flex items-center gap-2">
-                <LengthIndicator
+                  <h3 className="font-semibold text-card-foreground">
-                  length={metaData.description.length}
+                    Meta Description
-                  type="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"}