63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import React, { ReactNode, ComponentType } from "react";
|
|
import styles from "./OrganizedContent.module.css";
|
|
|
|
export interface LinkProps {
|
|
children: string | ReactNode | (string | ReactNode)[]
|
|
url: string
|
|
}
|
|
|
|
type Link = ComponentType<LinkProps>
|
|
|
|
|
|
interface Heading {
|
|
name: string;
|
|
url: string;
|
|
}
|
|
|
|
interface Props {
|
|
headings: Heading[];
|
|
currentIndex: number;
|
|
link: Link
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const OrganizedContent: React.FC<Props> = ({
|
|
headings,
|
|
currentIndex,
|
|
children,
|
|
link: Link,
|
|
}) => {
|
|
const prevHeading = currentIndex > 0 ? headings[currentIndex - 1] : undefined;
|
|
const nextHeading =
|
|
currentIndex < headings.length - 1 ? headings[currentIndex + 1] : undefined;
|
|
|
|
return (
|
|
<div className={styles.organizedcontent}>
|
|
<div>
|
|
{headings.map((heading, index) => (
|
|
<h3>
|
|
<Link url={heading.url}>{heading.name}</Link>
|
|
</h3>
|
|
))}
|
|
</div>
|
|
|
|
<div>
|
|
<h3>{headings[currentIndex].name}</h3>
|
|
{children}
|
|
{prevHeading && (
|
|
<Link url={prevHeading.url}>
|
|
Previous
|
|
{prevHeading.name}
|
|
</Link>
|
|
)}
|
|
{nextHeading && (
|
|
<Link url={nextHeading.url}>
|
|
Next
|
|
{nextHeading.name}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|