pull/64/head
Rebecca-Chou 3 months ago
parent 3bde1f4032
commit b411055d88
  1. 15
      components/BottomNav.module.css
  2. 33
      components/BottomNav.tsx
  3. 4
      pages/playground.tsx

@ -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 { QuotationCarousel } from "@/components/QuotationCarousel";
import { BottomNav } from "../components/BottomNav";
import { CenterWrapper } from "../components/CenterWrapper";
import { ColorPalette } from "../components/ColorPalette";
import { LineGraph } from "../components/LineGraph";
@ -132,6 +133,9 @@ export default function Home() {
circleDiameter={180}
/>
</div>
<h2></h2>
<BottomNav></BottomNav>
</div>
);
}

Loading…
Cancel
Save