[dyad] Added colored length indicators for meta tags - wrote 2 file(s)

src/components/length-indicator.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface LengthIndicatorProps {
+  length: number;
+  type: "title" | "description";
+}
+
+const TITLE_THRESHOLDS = {
+  good: { min: 30, max: 60 },
+  ok: { min: 15, max: 70 },
+};
+
+const DESCRIPTION_THRESHOLDS = {
+  good: { min: 120, max: 158 },
+  ok: { min: 50, max: 170 },
+};
+
+export function LengthIndicator({ length, type }: LengthIndicatorProps) {
+  const thresholds =
+    type === "title" ? TITLE_THRESHOLDS : DESCRIPTION_THRESHOLDS;
+
+  let colorClass = "bg-red-500";
+  let tooltipText = "Length is not optimal";
+
+  if (length === 0) {
+    tooltipText = "Not found";
+    colorClass = "bg-gray-400";
+  } else if (length >= thresholds.good.min && length <= thresholds.good.max) {
+    colorClass = "bg-green-500";
+    tooltipText = "Optimal length";
+  } else if (length >= thresholds.ok.min && length <= thresholds.ok.max) {
+    colorClass = "bg-yellow-500";
+    tooltipText = "Length could be improved";
+  } else if (length < thresholds.ok.min) {
+    tooltipText = "Too short";
+  } else if (length > thresholds.ok.max) {
+    tooltipText = "Too long";
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className={cn("h-3 w-3 rounded-full", colorClass)} />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>
+            {tooltipText} ({length} characters)
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

src/components/meta-form.tsx

@@ -6,6 +6,7 @@ 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";
 
 interface MetaData {
   title: string;
@@ -70,14 +71,26 @@ export function MetaForm() {
           </CardHeader>
           <CardContent className="space-y-4">
             <div>
-              <h3 className="font-semibold text-card-foreground">Meta Title</h3>
-              <p className="text-muted-foreground bg-muted p-3 rounded-md mt-1">
+              <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>
+              <p className="text-muted-foreground bg-muted p-3 rounded-md">
                 {metaData.title || "Not found"}
               </p>
             </div>
             <div>
-              <h3 className="font-semibold text-card-foreground">Meta Description</h3>
-              <p className="text-muted-foreground bg-muted p-3 rounded-md mt-1">
+              <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>
+              <p className="text-muted-foreground bg-muted p-3 rounded-md">
                 {metaData.description || "Not found"}
               </p>
             </div>