Updated

Signed-off-by: Avior <github@avior.me>

src/Link/Link.module.styl

@@ -0,0 +1,12 @@
+@import '../config'
+
+.link
+	color $infoDark
+	@media (prefers-color-scheme dark)
+		color $infoLight
+	&:hover
+		text-decoration underline
+
+.icon
+	vertical-align sub
+	margin 2px

src/Link/Link.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Link',
+	component: Component,
+	argTypes: {
+		href: {control: 'text', defaultValue: 'https://www.dzeio.com'},
+		text: {control: 'text', defaultValue: 'Dzeio'},
+		external: {control: 'boolean'},
+		hideIcon: {control: 'boolean'}
+	}
+} as Meta
+
+export const Basic = (args: any) => <Component {...args}>{args.text}</Component>

src/Link/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import NextLink from 'next/link'
+import { ExternalLink } from 'lucide-react'
+
+import css from './Link.module.styl'
+import { buildClassName } from '../Util'
+
+interface Props {
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+	href: string
+	children?: React.ReactNode
+	className?: string
+	/**
+	 * Remove styling
+	 */
+	noStyle?: boolean
+
+	/**
+	 * Override external detection system
+	 */
+	external?: boolean
+
+	/**
+	 * force hiding the icon
+	 */
+	hideIcon?: boolean
+}
+
+export default class Link extends React.Component<Props> {
+
+	public render() {
+		const isExternal = this.props.href.startsWith('http')
+		const externalProps = this.props.external ?? isExternal ? {
+			rel: 'noreferrer nofollow',
+			target: '_blank'
+		} : {}
+
+		if (isExternal) {
+			// external link
+			return (
+				<a
+					{...this.props.linkProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+					href={this.props.href}
+					{...externalProps}
+				>
+					{this.props.children}
+					{(this.props.external !== false && !this.props.hideIcon) && (
+						<ExternalLink size={16} className={css.icon} />
+					)}
+				</a>
+			)
+		}
+		return (
+			<NextLink href={this.props.href}>
+				<a
+					{...this.props.linkProps}
+					{...externalProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
+				>{this.props.children}</a>
+			</NextLink>
+		)
+	}
+
+}