[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>
+  );
+}