isuggest.selfce.st
alternative tangled frontend (extremely wip)
1import { motion } from "motion/react";
2import type { ReactNode } from "react";
3
4export const UnderlineLink = ({
5 href,
6 children,
7 className = "text-accent",
8 underlineColor = "bg-accent",
9 target = "_self",
10}: {
11 href: string;
12 children: ReactNode;
13 className?: string;
14 underlineColor?: string;
15 target?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop";
16}) => {
17 return (
18 <motion.a
19 href={href}
20 className={`relative inline-block ${className}`}
21 initial="initial"
22 whileHover="hover"
23 target={target}
24 >
25 {children}
26 <motion.span
27 className={`absolute bottom-1 left-0 h-0.25 w-full origin-center ${underlineColor}`}
28 variants={{
29 initial: { scaleX: 0 },
30 hover: { scaleX: 1 },
31 }}
32 transition={{
33 type: "spring",
34 duration: 0.25,
35 bounce: 0.3,
36 }}
37 />
38 </motion.a>
39 );
40};