Link Component
This commit is contained in:
parent
426c81360e
commit
078276efa7
|
@ -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);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 />
|
||||
|
||||
---
|
||||
|
|
Loading…
Reference in New Issue