highlight-text

1import { cva } from "class-variance-authority";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5const highlightVariants = cva("relative inline-block", {
6  variants: {
7    variant: {
8      underline: "",
9      box: "",
10      circle: "",
11      marker: "",
12    },
13    color: {
14      primary:
15        "[--highlight-color:hsl(var(--highlight-primary))] [&_path]:[stroke:var(--highlight-color)]",
16      secondary:
17        "[--highlight-color:hsl(var(--highlight-secondary))] [&_path]:[stroke:var(--highlight-color)]",
18      accent:
19        "[--highlight-color:hsl(var(--highlight-accent))] [&_path]:[stroke:var(--highlight-color)]",
20      destructive:
21        "[--highlight-color:hsl(var(--highlight-destructive))] [&_path]:[stroke:var(--highlight-color)]",
22    },
23  },
24  defaultVariants: {
25    variant: "underline",
26    color: "primary",
27  },
28});
29 
30type HighlightColor = "primary" | "secondary" | "accent" | "destructive";
31type HighlightVariant = "underline" | "box" | "circle" | "marker";
32 
33export interface HighlightTextProps
34  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
35  children: React.ReactNode;
36  variant?: HighlightVariant;
37  color?: HighlightColor;
38  animationDuration?: number;
39  animationDelay?: number;
40  strokeWidth?: number;
41  animate?: boolean;
42}
43 
44const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
45  (
46    {
47      className,
48      variant = "underline",
49      color = "primary",
50      children,
51      animationDuration = 0.8,
52      animationDelay = 0,
53      strokeWidth = 2,
54      animate = true,
55      ...props
56    },
57    ref,
58  ) => {
59    const [isVisible, setIsVisible] = React.useState(!animate);
60    const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
61    const containerRef = React.useRef<HTMLSpanElement>(null);
62 
63    React.useEffect(() => {
64      const element = containerRef.current;
65      if (!element) return;
66 
67      const updateDimensions = () => {
68        setDimensions({
69          width: element.offsetWidth,
70          height: element.offsetHeight,
71        });
72      };
73 
74      updateDimensions();
75 
76      const resizeObserver = new ResizeObserver(updateDimensions);
77      resizeObserver.observe(element);
78 
79      return () => resizeObserver.disconnect();
80    }, []);
81 
82    React.useEffect(() => {
83      if (!animate) {
84        setIsVisible(true);
85        return;
86      }
87 
88      const element = containerRef.current;
89      if (!element) return;
90 
91// … truncated