Refactor
This commit is contained in:
parent
429a9ae9fb
commit
07a2909c81
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<div>
|
||||
{isReadAll ? (
|
||||
<div>{readAllContent}</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>{readAllContent}</div>
|
||||
) : (
|
||||
<h2 className={styles.contentHeading}>
|
||||
{headings[currentIndex].name}
|
||||
</h2>
|
||||
)}
|
||||
{children}
|
||||
<Footer headings={headings} currentIndex={currentIndex} link={Link} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const childProps: ChildProps = {
|
||||
headings: headings,
|
||||
currentIndex: currentIndex,
|
||||
link: Link,
|
||||
};
|
||||
|
||||
const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
|
||||
return (
|
||||
<div className={styles.organizedContent}>
|
||||
<Nav {...childProps} />
|
||||
<div>
|
||||
{isReadAll ? (
|
||||
<>{readAllContent}</>
|
||||
) : (
|
||||
<>
|
||||
<h1>{headings[currentIndex].name}</h1>
|
||||
{children}
|
||||
<Footer {...childProps} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//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,25 +96,20 @@ 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
|
||||
|
@ -145,11 +127,10 @@ const Footer: React.FC<ChildProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{/* 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>
|
||||
|
@ -169,7 +150,6 @@ const Footer: React.FC<ChildProps> = ({
|
|||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue