patricktree.me
forked from
danabra.mov/overreacted
my blog https://overreacted.io
danabra.mov
1"use client";
2
3import { sans } from "./fonts";
4import { usePathname } from "next/navigation";
5import Link from "./Link";
6
7export default function HomeLink() {
8 const pathname = usePathname();
9 const isActive = pathname === "/";
10 return (
11 <Link
12 href="/"
13 className={[
14 sans.className,
15 "inline-block text-2xl font-black",
16 isActive ? "" : "hover:scale-[1.02]",
17 ].join(" ")}
18 >
19 <span
20 style={{
21 "--myColor1": isActive ? "var(--text)" : "var(--pink)",
22 "--myColor2": isActive ? "var(--text)" : "var(--purple)",
23 backgroundImage:
24 "linear-gradient(45deg, var(--myColor1), var(--myColor2))",
25 backgroundClip: "text",
26 WebkitBackgroundClip: "text",
27 color: "transparent",
28 transition: "--myColor1 0.2s ease-out, --myColor2 0.2s ease-in-out",
29 } as any}
30 >
31 overreacted
32 </span>
33 </Link>
34 );
35}