89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
import styles from "./BottomNav.module.css";
|
|
|
|
interface PagesInfo {
|
|
leftPage?: {
|
|
url: string;
|
|
name: string;
|
|
};
|
|
rightPage?: {
|
|
url: string;
|
|
name: string;
|
|
};
|
|
}
|
|
|
|
export function BottomNav(props: PagesInfo) {
|
|
const onlyRightArrow = props.rightPage && !props.leftPage;
|
|
const onlyLeftArrow = !props.rightPage && props.leftPage;
|
|
return (
|
|
<div
|
|
className={`${styles.container}
|
|
${onlyRightArrow ? styles.containerOnlyRightArrow : ""}
|
|
${onlyLeftArrow ? styles.containerOnlyLeftArrow : ""}`}
|
|
>
|
|
{props.leftPage ? (
|
|
<div className={styles.subBox + " " + styles.subBoxLeft}>
|
|
<Link href={props.leftPage.url}>
|
|
<a>
|
|
<Arrow />
|
|
</a>
|
|
</Link>
|
|
<Link href={props.leftPage.url}>
|
|
<a className={styles.item + " " + styles.leftItem}>
|
|
{props.leftPage.name}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
) : null}
|
|
{props.rightPage ? (
|
|
<div className={styles.subBox}>
|
|
<Link href={props.rightPage.url}>
|
|
<a className={styles.item}>{props.rightPage.name}</a>
|
|
</Link>
|
|
<Link href={props.rightPage.url}>
|
|
<a>
|
|
<Arrow isPointingRight />
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ArrowProps {
|
|
isPointingRight?: boolean;
|
|
}
|
|
|
|
function Arrow({ isPointingRight }: ArrowProps) {
|
|
return (
|
|
<svg className={(isPointingRight ? styles.right : "") + " " + styles.arrow}>
|
|
<defs>
|
|
<marker
|
|
id="arrow"
|
|
markerWidth="10"
|
|
markerHeight="10"
|
|
refX="5"
|
|
refY="3"
|
|
orient="auto"
|
|
markerUnits="strokeWidth"
|
|
>
|
|
<path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
|
|
</marker>
|
|
</defs>
|
|
|
|
<line
|
|
x1="250"
|
|
y1="10"
|
|
x2="100"
|
|
y2="10" // half of svg height
|
|
strokeWidth="3"
|
|
markerEnd="url(#arrow)"
|
|
className={styles.linePath}
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|