nav-bottom
This commit is contained in:
parent
3bde1f4032
commit
b411055d88
|
@ -0,0 +1,15 @@
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: space-between;
|
||||||
|
/* or inline-flex */
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {}
|
||||||
|
|
||||||
|
.anglePath {
|
||||||
|
stroke: var(--primary-accent)
|
||||||
|
}
|
||||||
|
|
||||||
|
.left.arrow {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import styles from "./BottomNav.module.css";
|
||||||
|
export function BottomNav() {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<Arrow pointLeft={true}></Arrow>
|
||||||
|
<p className={styles.item}>View Demographics</p>
|
||||||
|
<p className={styles.item}>View Co-ops</p>
|
||||||
|
<Arrow pointLeft={false}></Arrow>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ArrowProps {
|
||||||
|
pointLeft: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Arrow({ pointLeft }: ArrowProps) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 50 50"
|
||||||
|
className={pointLeft ? `${styles.left} ${styles.arrow}` : styles.arrow}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M100,2 L2,2 L2,100"
|
||||||
|
fill="none"
|
||||||
|
strokeWidth="10"
|
||||||
|
className={styles.anglePath}
|
||||||
|
/>
|
||||||
|
</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></BottomNav>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue