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-30 04:38:01 -04:00
parent 429a9ae9fb
commit 07a2909c81
2 changed files with 64 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/OrganizedContent.module.css
View File

@ -2,7 +2,7 @@
display: flex;
}
.contentHeading {
.organizedContent h1 {
font-size: 1.5rem;
margin: 1rem 0 1rem 0;
color: var(--blue-2);
@ -35,7 +35,7 @@
display: flex;
}
.selectedHeading {
.selectedHeadingArea > .navOption {
color: var(--blue-2);
font-weight: bold;
}

144
components/OrganizedContent.tsx
View File

@ -27,58 +27,49 @@ interface ChildProps {
link: Link;
}
export const OrganizedContent: React.FC<Props> = ({
export const OrganizedContent = ({
headings,
currentIndex,
children,
link: Link,
}) => {
children,
}: Props) => {
const isReadAll = headings[currentIndex].name === "Read All";
const isMobile = false;
const readAllContent = headings
.filter((heading: { name: string }) => heading.name !== "Read All")
.map((heading) => (
<div key={heading.url}>
<h2 className={styles.contentHeading}>{heading.name}</h2>
<h1>{heading.name}</h1>
{heading.content}
</div>
));
if (isMobile) {
return (
const childProps: ChildProps = {
headings: headings,
currentIndex: currentIndex,
link: Link,
};
return (
<div className={styles.organizedContent}>
<Nav {...childProps} />
<div>
{isReadAll ? (
<div>{readAllContent}</div>
<>{readAllContent}</>
) : (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
<>
<h1>{headings[currentIndex].name}</h1>
{children}
<Footer {...childProps} />
</>
)}
{children}
<Footer headings={headings} currentIndex={currentIndex} link={Link} />
</div>
);
} else {
return (
<div className={styles.organizedContent}>
<Nav headings={headings} currentIndex={currentIndex} link={Link} />
<div>
{isReadAll ? (
<div>{readAllContent}</div>
) : (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
)}
{children}
<Footer headings={headings} currentIndex={currentIndex} link={Link} />
</div>
</div>
);
}
</div>
);
};
const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
//todo push class to link
const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
return (
<div className={styles.nav}>
{headings.map((heading, index) => (
@ -90,11 +81,7 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
className={
styles.navOption +
" " +
(index === currentIndex
? styles.selectedHeading
: heading.name === "Read All"
? styles.readAll
: "")
(heading.name === "Read All" ? styles.readAll : "")
}
>
{index === currentIndex && (
@ -109,67 +96,60 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
);
};
const Footer: React.FC<ChildProps> = ({
headings,
currentIndex,
link: Link,
}) => {
const isReadAll = headings[currentIndex].name === "Read All";
const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
const prevHeading =
currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
? headings[currentIndex - 1]
: undefined;
const nextHeading =
currentIndex < headings.length - 1 && !isReadAll
currentIndex < headings.length - 1 &&
headings[currentIndex + 1].name !== "Read All"
? 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>
<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>
</Link>
</div>
</div>
</Link>
)}
{/* used to always push options to the edges with space-between */}
<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>
<Link url={nextHeading.url}>
<div className={styles.footerSection}>
<div>
<div className={styles.prevNext + " " + styles.nextText}>
Next
</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 className={styles.arrowHeading}>{nextHeading.name}</div>
</div>
</Link>
</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>
);