www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Refactor

This commit is contained in:
William Tran 2021-05-24 21:29:45 -04:00
parent fa1ad02690
commit 0bf1033c4a
3 changed files with 137 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/OrganizedContent.module.css
View File

@ -3,6 +3,7 @@
} }
.contentHeading { .contentHeading {
font-size: 1.5rem;
margin: 1rem 0 1rem 0; margin: 1rem 0 1rem 0;
color: var(--blue-2); color: var(--blue-2);
} }

302
components/OrganizedContent.tsx
View File

@ -21,6 +21,12 @@ interface Props {
children: ReactNode; children: ReactNode;
} }
interface ChildProps {
headings: Heading[];
currentIndex: number;
link: Link;
}
export const OrganizedContent: React.FC<Props> = ({ export const OrganizedContent: React.FC<Props> = ({
headings, headings,
currentIndex, currentIndex,
@ -28,131 +34,12 @@ export const OrganizedContent: React.FC<Props> = ({
link: Link, link: Link,
}) => { }) => {
const isReadAll = headings[currentIndex].name === "Read All"; const isReadAll = headings[currentIndex].name === "Read All";
const prevHeading =
currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
? headings[currentIndex - 1]
: undefined;
const nextHeading =
currentIndex < headings.length - 1 && !isReadAll
? headings[currentIndex + 1]
: undefined;
const isMobile = false; const isMobile = false;
if (!isMobile) { if (isMobile) {
return (
<div className={styles.organizedContent}>
<div className={styles.nav}>
{headings.map((heading, index) => (
<div
className={
index === currentIndex ? styles.selectedHeadingArea : ""
}
key={heading.url}
>
<div
className={
styles.navOption +
" " +
(index === currentIndex
? styles.selectedHeading
: heading.name === "Read All"
? styles.readAll
: "")
}
>
{index === currentIndex && (
<span className={styles.selectedMarker} />
)}
<Link url={heading.url}>{heading.name}</Link>
</div>
<div className={styles.divider}></div>
</div>
))}
</div>
<div>
{!isReadAll ? (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
) : (
<div>
{headings
.filter(
(heading: { name: string }) => heading.name !== "Read All"
)
.map((heading) => (
<div key={heading.url}>
<h2 className={styles.contentHeading}>{heading.name}</h2>
{heading.content}
</div>
))}
</div>
)}
{children}
<div className={styles.footer}>
{prevHeading && (
<div className={styles.clickable}>
<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.name}
</div>
</div>
</div>
</Link>
</div>
)}
<div></div>
{nextHeading && (
<div className={styles.clickable}>
<Link url={nextHeading.url}>
<div className={styles.footerSection}>
<div>
<div className={styles.prevNext + " " + styles.nextText}>
Next
</div>
<div className={styles.arrowHeading}>
{nextHeading.name}
</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>
)}
</div>
</div>
</div>
);
} else {
return ( return (
<div> <div>
{!isReadAll ? ( {isReadAll ? (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
) : (
<div> <div>
{headings {headings
.filter( .filter(
@ -165,60 +52,139 @@ export const OrganizedContent: React.FC<Props> = ({
</div> </div>
))} ))}
</div> </div>
) : (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
)} )}
{children} {children}
<div className={styles.footer}> <Footer headings={headings} currentIndex={currentIndex} link={Link} />
{prevHeading && ( </div>
<div className={styles.clickable}> );
<Link url={prevHeading.url}> } else {
<div className={styles.footerSection}> return (
<svg <div className={styles.organizedContent}>
xmlns="http://www.w3.org/2000/svg" <Nav headings={headings} currentIndex={currentIndex} link={Link} />
width="14" <div>
height="9" {isReadAll ? (
viewBox="0 0 14 9" <div>
className={styles.arrow + " " + styles.prevArrow} {headings
> .filter(
<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" /> (heading: { name: string }) => heading.name !== "Read All"
</svg> )
<div> .map((heading) => (
<div className={styles.prevNext}>Previous</div> <div key={heading.url}>
<div className={styles.arrowHeading}> <h2 className={styles.contentHeading}>{heading.name}</h2>
{prevHeading.name} {heading.content}
</div>
</div> </div>
</div> ))}
</Link>
</div>
)}
<div></div>
{nextHeading && (
<div className={styles.clickable}>
<Link url={nextHeading.url}>
<div className={styles.footerSection}>
<div>
<div className={styles.prevNext + " " + styles.nextText}>
Next
</div>
<div className={styles.arrowHeading}>
{nextHeading.name}
</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> </div>
) : (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
)} )}
{children}
<Footer headings={headings} currentIndex={currentIndex} link={Link} />
</div> </div>
</div> </div>
); );
} }
}; };
const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
return (
<div className={styles.nav}>
{headings.map((heading, index) => (
<div
className={index === currentIndex ? styles.selectedHeadingArea : ""}
key={heading.url}
>
<div
className={
styles.navOption +
" " +
(index === currentIndex
? styles.selectedHeading
: heading.name === "Read All"
? styles.readAll
: "")
}
>
{index === currentIndex && (
<span className={styles.selectedMarker} />
)}
<Link url={heading.url}>{heading.name}</Link>
</div>
<div className={styles.divider}></div>
</div>
))}
</div>
);
};
const Footer: React.FC<ChildProps> = ({
headings,
currentIndex,
link: Link,
}) => {
const isReadAll = headings[currentIndex].name === "Read All";
const prevHeading =
currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
? headings[currentIndex - 1]
: undefined;
const nextHeading =
currentIndex < headings.length - 1 && !isReadAll
? headings[currentIndex + 1]
: undefined;
return (
<div className={styles.footer}>
{prevHeading && (
<div className={styles.clickable}>
<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.name}</div>
</div>
</div>
</Link>
</div>
)}
<div></div>
{nextHeading && (
<div className={styles.clickable}>
<Link url={nextHeading.url}>
<div className={styles.footerSection}>
<div>
<div className={styles.prevNext + " " + styles.nextText}>
Next
</div>
<div className={styles.arrowHeading}>{nextHeading.name}</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>
)}
</div>
);
};

2
pages/playground.mdx
View File

@ -70,3 +70,5 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
Codey is supposed to say something here... Codey is supposed to say something here...
<OrganizedContentDemo /> <OrganizedContentDemo />
---