67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
import { getLengthIndicatorColor } from "@/lib/analysis";
|
|
|
|
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 color = getLengthIndicatorColor(length, type);
|
|
|
|
const colorClassMap = {
|
|
green: "bg-green-500",
|
|
yellow: "bg-yellow-500",
|
|
red: "bg-red-500",
|
|
gray: "bg-gray-400",
|
|
};
|
|
|
|
const thresholds =
|
|
type === "title" ? TITLE_THRESHOLDS : DESCRIPTION_THRESHOLDS;
|
|
let tooltipText = "Length is not optimal";
|
|
|
|
if (length === 0) {
|
|
tooltipText = "Not found";
|
|
} else if (length >= thresholds.good.min && length <= thresholds.good.max) {
|
|
tooltipText = "Optimal length";
|
|
} else if (length >= thresholds.ok.min && length <= thresholds.ok.max) {
|
|
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", colorClassMap[color])} />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>
|
|
{tooltipText} ({length} characters)
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
} |