InlineLink.tsx44 lines · main

1	import Link from 'next/link'
2	import { type MouseEvent, type PropsWithChildren } from 'react'
3	import { cn } from 'ui'
4
5	interface InlineLinkProps {
6	href: string
7	className?: string
8	target?: string
9	rel?: string
10	title?: string
11	onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
12	}
13
14	export const InlineLinkClassName =
15	'underline transition underline-offset-2 decoration-foreground-lighter hover:decoration-foreground text-inherit hover:text-foreground'
16
17	export const InlineLink = ({
18	href,
19	className: _className,
20	children,
21	title,
22	...props
23	}: PropsWithChildren<InlineLinkProps>) => {
24	const className = cn(InlineLinkClassName, _className)
25	if (href.startsWith('http')) {
26	return (
27	<a
28	title={title}
29	className={className}
30	href={href}
31	target="_blank"
32	rel="noreferrer noopener"
33	{...props}
34	>
35	{children}
36	</a>
37	)
38	}
39	return (
40	<Link className={className} href={href} title={title} {...props}>
41	{children}
42	</Link>
43	)
44	}