Underline Center

1"use client"
2 
3import { ElementType, useEffect, useRef, useMemo } from "react"
4import { motion, ValueAnimationTransition } from "motion/react"
5import { cn } from "@/lib/utils"
6 
7interface UnderlineProps {
8  /**
9   * The content to be displayed and animated
10   */
11  children: React.ReactNode
12 
13  /**
14   * HTML Tag to render the component as
15   * @default span
16   */
17  as?: ElementType
18 
19  /**
20   * Optional class name for styling
21   */
22  className?: string
23 
24  /**
25   * Animation transition configuration
26   * @default { duration: 0.25, ease: "easeInOut" }
27   */
28  transition?: ValueAnimationTransition
29 
30  /**
31   * Height of the underline as a ratio of font size
32   * @default 0.1
33   */
34  underlineHeightRatio?: number
35 
36  /**
37   * Padding of the underline as a ratio of font size
38   * @default 0.01
39   */
40  underlinePaddingRatio?: number
41}
42 
43const CenterUnderline = ({
44  children,
45  as,
46  className,
47  transition = { duration: 0.25, ease: "easeInOut" },
48  underlineHeightRatio = 0.1,
49  underlinePaddingRatio = 0.01,
50  ...props
51}: UnderlineProps) => {
52  const textRef = useRef<HTMLSpanElement>(null)
53  const MotionComponent = useMemo(() => motion.create(as ?? "span"), [as])
54 
55  useEffect(() => {
56    const updateUnderlineStyles = () => {
57      if (textRef.current) {
58        const fontSize = parseFloat(getComputedStyle(textRef.current).fontSize)
59        const underlineHeight = fontSize * underlineHeightRatio
60        const underlinePadding = fontSize * underlinePaddingRatio
61        textRef.current.style.setProperty(
62          "--underline-height",
63          `${underlineHeight}px`
64        )
65        textRef.current.style.setProperty(
66          "--underline-padding",
67          `${underlinePadding}px`
68        )
69      }
70    }
71 
72    updateUnderlineStyles()
73    window.addEventListener("resize", updateUnderlineStyles)
74 
75    return () => window.removeEventListener("resize", updateUnderlineStyles)
76  }, [underlineHeightRatio, underlinePaddingRatio])
77 
78  const underlineVariants = {
79    hidden: {
80      width: 0,
81      originX: 0.5,
82    },
83    visible: {
84      width: "100%",
85      transition: transition,
86    },
87  }
88 
89  return (
90    <MotionComponent
91      className={cn("relative inline-block cursor-pointer", className)}
92      whileHover="visible"
93      ref={textRef}
94      {...props}
95    >
96      <span>{children}</span>
97      <motion.div
98        className="absolute left-1/2 bg-current -translate-x-1/2"
99        style={{
100          height: "var(--underline-height)",
101// … truncated