parent
efd9eecdca
commit
edbae617c3
@ -0,0 +1,6 @@ |
||||
.organizedcontent { |
||||
background-color: rgb(78, 212, 178, 0.2); |
||||
color: var(--purple-2); |
||||
display:flex; |
||||
flex-direction:row; |
||||
} |
@ -0,0 +1,62 @@ |
||||
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> |
||||
); |
||||
}; |
Loading…
Reference in new issue