Link Component

components/Link.module.css

@@ -0,0 +1,10 @@
+.link {
+  color: var(--blue-2);
+  transition-duration: 0.3s;
+  text-decoration: none;
+  white-space: normal;
+}
+
+.link:hover {
+  color: var(--teal-2);
+}

components/Link.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./Link.module.css";
+import NextLink from "next/link";
+import { LinkProps as NextLinkProps } from "next/link";
+
+type Props = Omit<NextLinkProps, "href"> & { href: string };
+
+export const Link: React.FC<Props> = (props) => {
+  const { children, ...otherProps } = props;
+  const { href } = otherProps;
+
+  const isExternal = href.includes("http://") || href.includes("https://");
+
+  return isExternal ? (
+    <a
+      className={styles.link}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ) : (
+    <NextLink {...otherProps}>
+      <a className={styles.link}>{children}</a>
+    </NextLink>
+  );
+};

components/playground.module.css

@@ -91,3 +91,14 @@
     margin: calc(50rem / 16);
   }
 }
+
+.linkDemo {
+  padding: calc(50rem / 16);
+  background-color: var(--off-white);
+}
+
+.linkTitle {
+  font-weight: bold;
+  color: var(--purple-2);
+  font-size: calc(24rem / 16);
+}

components/playground.tsx

@@ -40,6 +40,7 @@ import CodeyInfo, {
 
 import { MiniEventCard } from "./MiniEventCard";
 import { NewsCard } from "./NewsCard";
+import { Link } from "./Link";
 import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
@@ -184,6 +185,23 @@ export function TeamMemberCardDemo() {
   );
 }
 
+export function LinkDemo() {
+  return (
+    <div className={styles.linkDemo}>
+      <div className={styles.linkTitle}>Elections</div>
+      <p>
+        To find out when and where the next elections will be held, keep an eye
+        on the <Link href="https://csclub.uwaterloo.ca/news/">News</Link>. For
+        details on the elections, read our{" "}
+        <Link href="https://csclub.uwaterloo.ca/about/constitution">
+          Constitution
+        </Link>
+        .
+      </p>
+    </div>
+  );
+}
+
 export function OrganizedContentDemo() {
   const sections = constitution;
 

pages/_app.tsx

@@ -1,21 +1,11 @@
-import React, { AnchorHTMLAttributes } from "react";
+import React from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
-import NextLink from "next/link";
 import "./_app.css";
 import "./font.css";
-
-function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
-  const { href, ...other } = props;
-
-  return (
-    <NextLink href={href ?? "#"}>
-      <a {...other}></a>
-    </NextLink>
-  );
-}
+import { Link } from "../components/Link";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (

pages/playground.mdx

@@ -2,6 +2,7 @@ import {
   MiniEventCardDemo,
   NewsCardDemo,
   EventDescriptionCardDemo,
+  LinkDemo,
   EventCardDemo,
   TeamMemberDemo,
   TeamMemberCardDemo,
@@ -81,3 +82,11 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
 <TeamMemberCardDemo />
 
 ---
+
+## `<Link />`
+
+The `<Link />` component is used on various pages such as Meet the Team! and Our Supporters
+
+<LinkDemo />
+
+---