-
Notifications
You must be signed in to change notification settings - Fork 2
/
nav-link.tsx
40 lines (36 loc) · 1.32 KB
/
nav-link.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// @deno-types="npm:@types/react@18.2.60"
import * as React from "react";
// adapted from https://github.com/shadcn-ui/ui/issues/414#issuecomment-1772421366
import type { JSX } from "preact";
import { forwardRef } from "preact/compat";
import { Slot } from "../deps/@radix-ui/react-slot.ts";
import { type VariantProps } from "../deps/class-variance-authority.ts";
import { buttonVariants } from "./button.tsx"; // Assuming Button.tsx is in the same directory
import { cn } from "./utils.ts";
export interface NavLinkProps
extends
Omit<JSX.HTMLAttributes<HTMLAnchorElement>, "size">,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(({
className,
variant,
asChild = false,
...props
}, ref) => {
const Comp = asChild ? Slot : "a";
return (
<Comp
className={cn(
buttonVariants({ variant, className }),
"inline-block relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 text-sm font-medium text-muted-foreground shadow-none transition-none focus-visible:ring-0 aria-[current='page']:border-b-primary aria-[current='page']:text-foreground aria-[current='page']:shadow-none",
className,
)}
ref={ref}
{...props}
/>
);
});
NavLink.displayName = "NavLink";
export { NavLink };