|
|
|
|
@ -9,27 +9,28 @@ import styles from "./OrganizedContent.module.css"; |
|
|
|
|
|
|
|
|
|
export interface LinkProps { |
|
|
|
|
className?: string; |
|
|
|
|
url: string; |
|
|
|
|
children: string | ReactNode | (string | ReactNode)[]; |
|
|
|
|
id: string; |
|
|
|
|
children: ReactNode; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
type Link = ComponentType<LinkProps>; |
|
|
|
|
|
|
|
|
|
interface Heading { |
|
|
|
|
interface Section { |
|
|
|
|
id: string; |
|
|
|
|
title: string; |
|
|
|
|
url: string; |
|
|
|
|
content: ReactNode; |
|
|
|
|
Content: ComponentType; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const READ_ALL_TITLE = "Read All"; |
|
|
|
|
export const READ_ALL_ID = "read-all"; |
|
|
|
|
|
|
|
|
|
interface Props { |
|
|
|
|
headings: Heading[]; |
|
|
|
|
currentIndex: number; |
|
|
|
|
sections: Section[]; |
|
|
|
|
currentId: string; |
|
|
|
|
link: Link; |
|
|
|
|
children: ReactNode; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
interface ChildProps { |
|
|
|
|
headings: Heading[]; |
|
|
|
|
sections: Section[]; |
|
|
|
|
currentIndex: number; |
|
|
|
|
link: Link; |
|
|
|
|
} |
|
|
|
|
@ -40,31 +41,22 @@ interface MobileProps { |
|
|
|
|
childProps?: ChildProps; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export const OrganizedContent = ({ |
|
|
|
|
headings, |
|
|
|
|
currentIndex, |
|
|
|
|
link: Link, |
|
|
|
|
children, |
|
|
|
|
}: Props) => { |
|
|
|
|
export function OrganizedContent(props: Props) { |
|
|
|
|
const sections = createSections(props.sections); |
|
|
|
|
const currentIndex = sections.findIndex(({ id }) => id === props.currentId); |
|
|
|
|
const [open, setOpen] = useState(false); |
|
|
|
|
//const node = useRef();
|
|
|
|
|
//useOnClickOutside(node, () => setOpen(false));
|
|
|
|
|
|
|
|
|
|
const isReadAll = headings[currentIndex].title === "Read All"; |
|
|
|
|
if (currentIndex < 0) { |
|
|
|
|
throw new Error(`Section with ID ${props.currentId} was not found`); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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 section = sections[currentIndex]; |
|
|
|
|
const isReadAll = section.id === READ_ALL_ID; |
|
|
|
|
|
|
|
|
|
const childProps: ChildProps = { |
|
|
|
|
headings: headings, |
|
|
|
|
sections: props.sections, |
|
|
|
|
currentIndex: currentIndex, |
|
|
|
|
link: Link, |
|
|
|
|
link: props.link, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const mobileProps: MobileProps = { |
|
|
|
|
@ -80,117 +72,105 @@ export const OrganizedContent = ({ |
|
|
|
|
}, [open]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className={styles.organizedContent}> |
|
|
|
|
<Nav {...childProps} /> |
|
|
|
|
<div> |
|
|
|
|
<div className={styles.wrapper}> |
|
|
|
|
<Nav sections={sections} currentIndex={currentIndex} link={props.link} /> |
|
|
|
|
<div className={styles.content}> |
|
|
|
|
{isReadAll ? ( |
|
|
|
|
<>{readAllContent}</> |
|
|
|
|
<section.Content /> |
|
|
|
|
) : ( |
|
|
|
|
<> |
|
|
|
|
<h1>{headings[currentIndex].title}</h1> |
|
|
|
|
{children} |
|
|
|
|
<Footer {...childProps} /> |
|
|
|
|
<div> |
|
|
|
|
<h1>{section.title}</h1> |
|
|
|
|
<section.Content /> |
|
|
|
|
</div> |
|
|
|
|
<Footer |
|
|
|
|
sections={sections} |
|
|
|
|
currentIndex={currentIndex} |
|
|
|
|
link={props.link} |
|
|
|
|
/> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
<MobileWrapper {...mobileProps} /> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => { |
|
|
|
|
interface NavProps { |
|
|
|
|
sections: Section[]; |
|
|
|
|
currentIndex: number; |
|
|
|
|
link: Link; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function Nav({ sections, currentIndex, link: Link }: NavProps) { |
|
|
|
|
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 : "") |
|
|
|
|
} |
|
|
|
|
{sections.map((section, index) => { |
|
|
|
|
const classNames = [styles.navItem]; |
|
|
|
|
|
|
|
|
|
if (index === currentIndex) { |
|
|
|
|
classNames.push(styles.selected); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (section.id === READ_ALL_ID) { |
|
|
|
|
classNames.push(styles.readAll); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Link |
|
|
|
|
className={classNames.join(" ")} |
|
|
|
|
id={section.id} |
|
|
|
|
key={section.id} |
|
|
|
|
> |
|
|
|
|
{index === currentIndex && ( |
|
|
|
|
<span className={styles.selectedMarker} /> |
|
|
|
|
)} |
|
|
|
|
<Link |
|
|
|
|
className={ |
|
|
|
|
styles.navLink + |
|
|
|
|
" " + |
|
|
|
|
(index === currentIndex ? styles.navLinkSelected : "") |
|
|
|
|
} |
|
|
|
|
url={heading.url} |
|
|
|
|
> |
|
|
|
|
{heading.title} |
|
|
|
|
</Link> |
|
|
|
|
</div> |
|
|
|
|
<div className={styles.divider}></div> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
<span className={styles.marker} /> |
|
|
|
|
<div>{section.title}</div> |
|
|
|
|
</Link> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => { |
|
|
|
|
const prevHeading = |
|
|
|
|
currentIndex > 0 && headings[currentIndex - 1].title !== "Read All" |
|
|
|
|
? headings[currentIndex - 1] |
|
|
|
|
interface FooterProps { |
|
|
|
|
sections: Section[]; |
|
|
|
|
currentIndex: number; |
|
|
|
|
link: Link; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function Footer({ sections, currentIndex, link: Link }: FooterProps) { |
|
|
|
|
const prevSection = |
|
|
|
|
currentIndex > 0 && sections[currentIndex - 1].id !== READ_ALL_ID |
|
|
|
|
? sections[currentIndex - 1] |
|
|
|
|
: undefined; |
|
|
|
|
const nextHeading = |
|
|
|
|
currentIndex < headings.length - 1 && |
|
|
|
|
headings[currentIndex + 1].title !== "Read All" |
|
|
|
|
? headings[currentIndex + 1] |
|
|
|
|
const nextSection = |
|
|
|
|
currentIndex < sections.length - 1 && |
|
|
|
|
sections[currentIndex + 1].id !== READ_ALL_ID |
|
|
|
|
? sections[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> |
|
|
|
|
{prevSection && ( |
|
|
|
|
<Link className={styles.previous} id={prevSection.id}> |
|
|
|
|
<Arrow direction="left" /> |
|
|
|
|
<div> |
|
|
|
|
<div>Previous</div> |
|
|
|
|
<div className={styles.arrowHeading}>{prevSection.title}</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> |
|
|
|
|
{nextSection && ( |
|
|
|
|
<Link className={styles.next} id={nextSection.id}> |
|
|
|
|
<div> |
|
|
|
|
<div>Next</div> |
|
|
|
|
<div className={styles.arrowHeading}>{nextSection.title}</div> |
|
|
|
|
</div> |
|
|
|
|
<Arrow direction="right" /> |
|
|
|
|
</Link> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const Burger = ({ open, setOpen }: MobileProps) => { |
|
|
|
|
const [prevScrollPos, setPrevScrollPos] = useState(0); |
|
|
|
|
@ -291,3 +271,41 @@ function useDebounce<T>(value: T, delay?: number): T { |
|
|
|
|
|
|
|
|
|
return debouncedValue; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function createSections(sections: Section[]) { |
|
|
|
|
return [ |
|
|
|
|
{ |
|
|
|
|
id: READ_ALL_ID, |
|
|
|
|
title: READ_ALL_TITLE, |
|
|
|
|
Content() { |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{sections.map(({ id, title, Content: SectionContent }) => ( |
|
|
|
|
<div key={id}> |
|
|
|
|
<h1>{title}</h1> |
|
|
|
|
<SectionContent /> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
...sections, |
|
|
|
|
]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function Arrow({ direction }: { direction: "left" | "right" }) { |
|
|
|
|
return ( |
|
|
|
|
<svg |
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
width="14" |
|
|
|
|
height="9" |
|
|
|
|
viewBox="0 0 14 9" |
|
|
|
|
className={`${styles.arrow} ${ |
|
|
|
|
direction === "left" ? styles.prevArrow : 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> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
William Tran
2 years ago