cs-2022-class-profile/components/BottomNav.tsx

34 lines
729 B
TypeScript

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>
);
}