www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

adjust space
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Rebecca-Chou 2022-09-27 19:47:21 -04:00
parent 4b968ea89e
commit 002b5ff18d
3 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/BottomNav.module.css
View File

@ -2,15 +2,19 @@
display: flex; display: flex;
flex-flow: center; flex-flow: center;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-between;
/* or inline-flex */ margin: calc(40rem / 16) calc(40rem / 16);
}
.subBox {
display: inline-block;
} }
.item { .item {
display: inline-block;
color: var(--primary-text); color: var(--primary-text);
font-size: calc(28rem / 16); font-size: calc(28rem / 16);
position: relative; position: relative;
margin: calc(24rem / 16);
} }
.item:after { .item:after {

40
components/BottomNav.tsx
View File

@ -11,14 +11,26 @@ interface PageLinks {
export function BottomNav(props: PageLinks) { export function BottomNav(props: PageLinks) {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Arrow isPointRight={true}></Arrow> <div className={styles.subBox}>
<Link href={props.leftPage}> <Link href={props.leftPage}>
<a className={styles.item}>View Demographics</a> <a>
</Link> <Arrow isPointRight={true}></Arrow>
<Link href={props.leftPage}> </a>
<a className={styles.item}>View Co-ops</a> </Link>
</Link> <Link href={props.leftPage}>
<Arrow isPointRight={false}></Arrow> <a className={styles.item}>View Demographics</a>
</Link>
</div>
<div className={styles.subBox}>
<Link href={props.leftPage}>
<a className={styles.item}>View Co-ops</a>
</Link>
<Link href={props.leftPage}>
<a>
<Arrow isPointRight={false}></Arrow>
</a>
</Link>
</div>
</div> </div>
); );
} }
@ -30,8 +42,8 @@ interface ArrowProps {
function Arrow({ isPointRight }: ArrowProps) { function Arrow({ isPointRight }: ArrowProps) {
return ( return (
<svg <svg
width="300px" width="250px"
height="150px" height="20px"
className={isPointRight ? styles.right : styles.left} className={isPointRight ? styles.right : styles.left}
> >
<defs> <defs>
@ -49,10 +61,10 @@ function Arrow({ isPointRight }: ArrowProps) {
</defs> </defs>
<line <line
x1="295" x1="250"
y1="75" y1="10"
x2="95" x2="100"
y2="75" y2="10" // half of svg height
strokeWidth="3" strokeWidth="3"
markerEnd="url(#arrow)" markerEnd="url(#arrow)"
className={styles.linePath} className={styles.linePath}

4
pages/playground.tsx
View File

@ -169,7 +169,9 @@ export default function Home() {
/> />
</div> </div>
<h2></h2> <h2>
<code>{"<BottomNav />"}</code>
</h2>
<BottomNav leftPage="/" rightPage="/"></BottomNav> <BottomNav leftPage="/" rightPage="/"></BottomNav>
</div> </div>
); );