From 078276efa7e12e7a700b1bff2bebb815ba2cde00 Mon Sep 17 00:00:00 2001
From: Catherine Wan <c29wan@uwaterloo.ca>
Date: Sun, 13 Jun 2021 19:36:34 +0000
Subject: [PATCH] Link Component

---
 components/Link.module.css       | 10 ++++++++++
 components/Link.tsx              | 28 ++++++++++++++++++++++++++++
 components/playground.module.css | 11 +++++++++++
 components/playground.tsx        | 18 ++++++++++++++++++
 pages/_app.tsx                   | 14 ++------------
 pages/playground.mdx             |  9 +++++++++
 6 files changed, 78 insertions(+), 12 deletions(-)
 create mode 100644 components/Link.module.css
 create mode 100644 components/Link.tsx

diff --git a/components/Link.module.css b/components/Link.module.css
new file mode 100644
index 00000000..ba0d61f8
--- /dev/null
+++ b/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);
+}
diff --git a/components/Link.tsx b/components/Link.tsx
new file mode 100644
index 00000000..97325ff6
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/components/playground.module.css b/components/playground.module.css
index f43d992d..8a3adcde 100644
--- a/components/playground.module.css
+++ b/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);
+}
diff --git a/components/playground.tsx b/components/playground.tsx
index 2a4dd030..347a8f08 100644
--- a/components/playground.tsx
+++ b/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;
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index ba816722..cbb41c98 100644
--- a/pages/_app.tsx
+++ b/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 (
diff --git a/pages/playground.mdx b/pages/playground.mdx
index 5edcad2a..3a38453a 100644
--- a/pages/playground.mdx
+++ b/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 />
+
+---