Compare commits
2 Commits
3bde1f4032
...
e7131529e3
Author | SHA1 | Date |
---|---|---|
Rebecca-Chou | e7131529e3 | |
Rebecca-Chou | b411055d88 |
|
@ -0,0 +1,45 @@
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
/* or inline-flex */
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--primary-text);
|
||||||
|
font-size: calc(28rem / 16);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: scaleX(0);
|
||||||
|
height: 2px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: var(--primary-accent);
|
||||||
|
cursor: pointer;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
transition: transform 0.25s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover:after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linePath {
|
||||||
|
stroke: var(--primary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrowPath {
|
||||||
|
fill: var(--primary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
|
@ -0,0 +1,62 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import styles from "./BottomNav.module.css";
|
||||||
|
|
||||||
|
interface PageLinks {
|
||||||
|
leftPage: string;
|
||||||
|
rightPage: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BottomNav(props: PageLinks) {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<Arrow isPointRight={true}></Arrow>
|
||||||
|
<Link href={props.leftPage}>
|
||||||
|
<a className={styles.item}>View Demographics</a>
|
||||||
|
</Link>
|
||||||
|
<Link href={props.leftPage}>
|
||||||
|
<a className={styles.item}>View Co-ops</a>
|
||||||
|
</Link>
|
||||||
|
<Arrow isPointRight={false}></Arrow>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ArrowProps {
|
||||||
|
isPointRight: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Arrow({ isPointRight }: ArrowProps) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="300px"
|
||||||
|
height="150px"
|
||||||
|
className={isPointRight ? styles.right : styles.left}
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<marker
|
||||||
|
id="arrow"
|
||||||
|
markerWidth="10"
|
||||||
|
markerHeight="10"
|
||||||
|
refX="5"
|
||||||
|
refY="3"
|
||||||
|
orient="auto"
|
||||||
|
markerUnits="strokeWidth"
|
||||||
|
>
|
||||||
|
<path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<line
|
||||||
|
x1="295"
|
||||||
|
y1="75"
|
||||||
|
x2="95"
|
||||||
|
y2="75"
|
||||||
|
strokeWidth="3"
|
||||||
|
markerEnd="url(#arrow)"
|
||||||
|
className={styles.linePath}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
|
@ -13,6 +13,7 @@ import React from "react";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||||
|
|
||||||
|
import { BottomNav } from "../components/BottomNav";
|
||||||
import { CenterWrapper } from "../components/CenterWrapper";
|
import { CenterWrapper } from "../components/CenterWrapper";
|
||||||
import { ColorPalette } from "../components/ColorPalette";
|
import { ColorPalette } from "../components/ColorPalette";
|
||||||
import { LineGraph } from "../components/LineGraph";
|
import { LineGraph } from "../components/LineGraph";
|
||||||
|
@ -132,6 +133,9 @@ export default function Home() {
|
||||||
circleDiameter={180}
|
circleDiameter={180}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2></h2>
|
||||||
|
<BottomNav leftPage="/" rightPage="/"></BottomNav>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue