158 lines
4.3 KiB
TypeScript
158 lines
4.3 KiB
TypeScript
import React, { ReactNode, ComponentType } from "react";
|
|
import styles from "./OrganizedContent.module.css";
|
|
|
|
export interface LinkProps {
|
|
className?: string;
|
|
url: string;
|
|
children: string | ReactNode | (string | ReactNode)[];
|
|
}
|
|
|
|
type Link = ComponentType<LinkProps>;
|
|
|
|
interface Heading {
|
|
title: string;
|
|
url: string;
|
|
content: ReactNode;
|
|
}
|
|
|
|
interface Props {
|
|
headings: Heading[];
|
|
currentIndex: number;
|
|
link: Link;
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface ChildProps {
|
|
headings: Heading[];
|
|
currentIndex: number;
|
|
link: Link;
|
|
}
|
|
|
|
export const OrganizedContent = ({
|
|
headings,
|
|
currentIndex,
|
|
link: Link,
|
|
children,
|
|
}: Props) => {
|
|
const isReadAll = headings[currentIndex].title === "Read All";
|
|
|
|
const readAllContent = headings
|
|
.filter((heading: { title: string }) => heading.title !== "Read All")
|
|
.map((heading) => (
|
|
<div key={heading.url}>
|
|
<h1>{heading.title}</h1>
|
|
{heading.content}
|
|
</div>
|
|
));
|
|
|
|
const childProps: ChildProps = {
|
|
headings: headings,
|
|
currentIndex: currentIndex,
|
|
link: Link,
|
|
};
|
|
|
|
return (
|
|
<div className={styles.organizedContent}>
|
|
<Nav {...childProps} />
|
|
<div>
|
|
{isReadAll ? (
|
|
<>{readAllContent}</>
|
|
) : (
|
|
<>
|
|
<h1>{headings[currentIndex].title}</h1>
|
|
{children}
|
|
<Footer {...childProps} />
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
|
return (
|
|
<div className={styles.nav}>
|
|
{headings.map((heading, index) => (
|
|
<div
|
|
className={index === currentIndex ? styles.selectedHeadingArea : ""}
|
|
key={heading.url}
|
|
>
|
|
<div
|
|
className={
|
|
styles.navOption +
|
|
" " +
|
|
(heading.title === "Read All" ? styles.readAll : "")
|
|
}
|
|
>
|
|
{index === currentIndex && (
|
|
<span className={styles.selectedMarker} />
|
|
)}
|
|
<Link className={styles.navLink} url={heading.url}>
|
|
{heading.title}
|
|
</Link>
|
|
</div>
|
|
<div className={styles.divider}></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
|
const prevHeading =
|
|
currentIndex > 0 && headings[currentIndex - 1].title !== "Read All"
|
|
? headings[currentIndex - 1]
|
|
: undefined;
|
|
const nextHeading =
|
|
currentIndex < headings.length - 1 &&
|
|
headings[currentIndex + 1].title !== "Read All"
|
|
? headings[currentIndex + 1]
|
|
: undefined;
|
|
|
|
return (
|
|
<div className={styles.footer}>
|
|
{prevHeading && (
|
|
<Link url={prevHeading.url}>
|
|
<div className={styles.footerSection}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="9"
|
|
viewBox="0 0 14 9"
|
|
className={styles.arrow + " " + styles.prevArrow}
|
|
>
|
|
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
|
</svg>
|
|
<div>
|
|
<div className={styles.prevNext}>Previous</div>
|
|
<div className={styles.arrowHeading}>{prevHeading.title}</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)}
|
|
<div className={styles.footerDivider}></div>
|
|
{nextHeading && (
|
|
<Link url={nextHeading.url}>
|
|
<div className={styles.footerSection}>
|
|
<div>
|
|
<div className={styles.prevNext + " " + styles.nextText}>
|
|
Next
|
|
</div>
|
|
<div className={styles.arrowHeading}>{nextHeading.title}</div>
|
|
</div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="9"
|
|
viewBox="0 0 14 9"
|
|
className={styles.arrow + " " + styles.nextArrow}
|
|
>
|
|
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|