Refactor
This commit is contained in:
William Tran
parent
fa1ad02690
commit
0bf1033c4a
|
|
@ -3,6 +3,7 @@
|
|||
}
|
||||
|
||||
.contentHeading {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem 0 1rem 0;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,12 @@ interface Props {
|
|||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface ChildProps {
|
||||
headings: Heading[];
|
||||
currentIndex: number;
|
||||
link: Link;
|
||||
}
|
||||
|
||||
export const OrganizedContent: React.FC<Props> = ({
|
||||
headings,
|
||||
currentIndex,
|
||||
|
|
@ -28,26 +34,70 @@ export const OrganizedContent: React.FC<Props> = ({
|
|||
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;
|
||||
|
||||
const isMobile = false;
|
||||
|
||||
if (!isMobile) {
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div>
|
||||
{isReadAll ? (
|
||||
<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>
|
||||
) : (
|
||||
<h2 className={styles.contentHeading}>
|
||||
{headings[currentIndex].name}
|
||||
</h2>
|
||||
)}
|
||||
{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>
|
||||
{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>
|
||||
) : (
|
||||
<h2 className={styles.contentHeading}>
|
||||
{headings[currentIndex].name}
|
||||
</h2>
|
||||
)}
|
||||
{children}
|
||||
<Footer headings={headings} currentIndex={currentIndex} link={Link} />
|
||||
</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 : ""
|
||||
}
|
||||
className={index === currentIndex ? styles.selectedHeadingArea : ""}
|
||||
key={heading.url}
|
||||
>
|
||||
<div
|
||||
|
|
@ -70,155 +120,71 @@ export const OrganizedContent: React.FC<Props> = ({
|
|||
</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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -70,3 +70,5 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
|
|||
Codey is supposed to say something here...
|
||||
|
||||
<OrganizedContentDemo />
|
||||
|
||||
---
|
||||
Loading…
Reference in New Issue