aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/links/link.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/links/link.tsx')
-rw-r--r--src/components/atoms/links/link.tsx67
1 files changed, 67 insertions, 0 deletions
diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx
new file mode 100644
index 0000000..c8ba273
--- /dev/null
+++ b/src/components/atoms/links/link.tsx
@@ -0,0 +1,67 @@
+import NextLink from 'next/link';
+import { FC, ReactNode } from 'react';
+import styles from './link.module.scss';
+
+export type LinkProps = {
+ /**
+ * The link body.
+ */
+ children: ReactNode;
+ /**
+ * Set additional classnames to the link.
+ */
+ className?: string;
+ /**
+ * True if it is a download link. Default: false.
+ */
+ download?: boolean;
+ /**
+ * True if it is an external link. Default: false.
+ */
+ external?: boolean;
+ /**
+ * The link target.
+ */
+ href: string;
+ /**
+ * The link target code language.
+ */
+ lang?: string;
+};
+
+/**
+ * Link Component
+ *
+ * Render a link.
+ */
+const Link: FC<LinkProps> = ({
+ children,
+ className = '',
+ download = false,
+ external = false,
+ href,
+ lang,
+}) => {
+ const downloadClass = download ? styles['link--download'] : '';
+
+ return external ? (
+ <a
+ href={href}
+ hrefLang={lang}
+ className={`${styles.link} ${styles['link--external']} ${downloadClass} ${className}`}
+ >
+ {children}
+ </a>
+ ) : (
+ <NextLink href={href}>
+ <a
+ hrefLang={lang}
+ className={`${styles.link} ${downloadClass} ${className}`}
+ >
+ {children}
+ </a>
+ </NextLink>
+ );
+};
+
+export default Link;