adjust space

pull/64/head
Rebecca-Chou 2 months ago
parent 4b968ea89e
commit 002b5ff18d
  1. 10
      components/BottomNav.module.css
  2. 40
      components/BottomNav.tsx
  3. 4
      pages/playground.tsx

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

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

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

Loading…
Cancel
Save