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);
|
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 { MiniEventCard } from "./MiniEventCard";
|
||||||
import { NewsCard } from "./NewsCard";
|
import { NewsCard } from "./NewsCard";
|
||||||
|
import { Link } from "./Link";
|
||||||
import { EventCard } from "./EventCard";
|
import { EventCard } from "./EventCard";
|
||||||
import { EventDescriptionCard } from "./EventDescriptionCard";
|
import { EventDescriptionCard } from "./EventDescriptionCard";
|
||||||
import { TeamMember } from "./TeamMember";
|
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() {
|
export function OrganizedContentDemo() {
|
||||||
const sections = constitution;
|
const sections = constitution;
|
||||||
|
|
||||||
|
|
|
@ -1,21 +1,11 @@
|
||||||
import React, { AnchorHTMLAttributes } from "react";
|
import React from "react";
|
||||||
import { AppProps } from "next/app";
|
import { AppProps } from "next/app";
|
||||||
import { MDXProvider } from "@mdx-js/react";
|
import { MDXProvider } from "@mdx-js/react";
|
||||||
import { ThemeProvider } from "../components/theme";
|
import { ThemeProvider } from "../components/theme";
|
||||||
import { Navbar } from "../components/Navbar";
|
import { Navbar } from "../components/Navbar";
|
||||||
import NextLink from "next/link";
|
|
||||||
import "./_app.css";
|
import "./_app.css";
|
||||||
import "./font.css";
|
import "./font.css";
|
||||||
|
import { Link } from "../components/Link";
|
||||||
function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
|
|
||||||
const { href, ...other } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NextLink href={href ?? "#"}>
|
|
||||||
<a {...other}></a>
|
|
||||||
</NextLink>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -2,6 +2,7 @@ import {
|
||||||
MiniEventCardDemo,
|
MiniEventCardDemo,
|
||||||
NewsCardDemo,
|
NewsCardDemo,
|
||||||
EventDescriptionCardDemo,
|
EventDescriptionCardDemo,
|
||||||
|
LinkDemo,
|
||||||
EventCardDemo,
|
EventCardDemo,
|
||||||
TeamMemberDemo,
|
TeamMemberDemo,
|
||||||
TeamMemberCardDemo,
|
TeamMemberCardDemo,
|
||||||
|
@ -81,3 +82,11 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
|
||||||
<TeamMemberCardDemo />
|
<TeamMemberCardDemo />
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## `<Link />`
|
||||||
|
|
||||||
|
The `<Link />` component is used on various pages such as Meet the Team! and Our Supporters
|
||||||
|
|
||||||
|
<LinkDemo />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
Loading…
Reference in New Issue