Refactor
This commit is contained in:
William Tran
parent
429a9ae9fb
commit
07a2909c81
|
|
@ -2,7 +2,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentHeading {
|
.organizedContent h1 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin: 1rem 0 1rem 0;
|
margin: 1rem 0 1rem 0;
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectedHeading {
|
.selectedHeadingArea > .navOption {
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,58 +27,49 @@ interface ChildProps {
|
||||||
link: Link;
|
link: Link;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const OrganizedContent: React.FC<Props> = ({
|
export const OrganizedContent = ({
|
||||||
headings,
|
headings,
|
||||||
currentIndex,
|
currentIndex,
|
||||||
children,
|
|
||||||
link: Link,
|
link: Link,
|
||||||
}) => {
|
children,
|
||||||
|
}: Props) => {
|
||||||
const isReadAll = headings[currentIndex].name === "Read All";
|
const isReadAll = headings[currentIndex].name === "Read All";
|
||||||
const isMobile = false;
|
|
||||||
const readAllContent = headings
|
const readAllContent = headings
|
||||||
.filter((heading: { name: string }) => heading.name !== "Read All")
|
.filter((heading: { name: string }) => heading.name !== "Read All")
|
||||||
.map((heading) => (
|
.map((heading) => (
|
||||||
<div key={heading.url}>
|
<div key={heading.url}>
|
||||||
<h2 className={styles.contentHeading}>{heading.name}</h2>
|
<h1>{heading.name}</h1>
|
||||||
{heading.content}
|
{heading.content}
|
||||||
</div>
|
</div>
|
||||||
));
|
));
|
||||||
|
|
||||||
if (isMobile) {
|
const childProps: ChildProps = {
|
||||||
return (
|
headings: headings,
|
||||||
|
currentIndex: currentIndex,
|
||||||
|
link: Link,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.organizedContent}>
|
||||||
|
<Nav {...childProps} />
|
||||||
<div>
|
<div>
|
||||||
{isReadAll ? (
|
{isReadAll ? (
|
||||||
<div>{readAllContent}</div>
|
<>{readAllContent}</>
|
||||||
) : (
|
) : (
|
||||||
<h2 className={styles.contentHeading}>
|
<>
|
||||||
{headings[currentIndex].name}
|
<h1>{headings[currentIndex].name}</h1>
|
||||||
</h2>
|
{children}
|
||||||
|
<Footer {...childProps} />
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
{children}
|
|
||||||
<Footer headings={headings} currentIndex={currentIndex} link={Link} />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</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 Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
|
//todo push class to link
|
||||||
|
const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.nav}>
|
<div className={styles.nav}>
|
||||||
{headings.map((heading, index) => (
|
{headings.map((heading, index) => (
|
||||||
|
|
@ -90,11 +81,7 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
|
||||||
className={
|
className={
|
||||||
styles.navOption +
|
styles.navOption +
|
||||||
" " +
|
" " +
|
||||||
(index === currentIndex
|
(heading.name === "Read All" ? styles.readAll : "")
|
||||||
? styles.selectedHeading
|
|
||||||
: heading.name === "Read All"
|
|
||||||
? styles.readAll
|
|
||||||
: "")
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{index === currentIndex && (
|
{index === currentIndex && (
|
||||||
|
|
@ -109,67 +96,60 @@ const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Footer: React.FC<ChildProps> = ({
|
const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
||||||
headings,
|
|
||||||
currentIndex,
|
|
||||||
link: Link,
|
|
||||||
}) => {
|
|
||||||
const isReadAll = headings[currentIndex].name === "Read All";
|
|
||||||
const prevHeading =
|
const prevHeading =
|
||||||
currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
|
currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
|
||||||
? headings[currentIndex - 1]
|
? headings[currentIndex - 1]
|
||||||
: undefined;
|
: undefined;
|
||||||
const nextHeading =
|
const nextHeading =
|
||||||
currentIndex < headings.length - 1 && !isReadAll
|
currentIndex < headings.length - 1 &&
|
||||||
|
headings[currentIndex + 1].name !== "Read All"
|
||||||
? headings[currentIndex + 1]
|
? headings[currentIndex + 1]
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.footer}>
|
<div className={styles.footer}>
|
||||||
{prevHeading && (
|
{prevHeading && (
|
||||||
<div className={styles.clickable}>
|
<Link url={prevHeading.url}>
|
||||||
<Link url={prevHeading.url}>
|
<div className={styles.footerSection}>
|
||||||
<div className={styles.footerSection}>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
width="14"
|
||||||
width="14"
|
height="9"
|
||||||
height="9"
|
viewBox="0 0 14 9"
|
||||||
viewBox="0 0 14 9"
|
className={styles.arrow + " " + styles.prevArrow}
|
||||||
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" />
|
||||||
<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>
|
||||||
</svg>
|
<div>
|
||||||
<div>
|
<div className={styles.prevNext}>Previous</div>
|
||||||
<div className={styles.prevNext}>Previous</div>
|
<div className={styles.arrowHeading}>{prevHeading.name}</div>
|
||||||
<div className={styles.arrowHeading}>{prevHeading.name}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
{/* used to always push options to the edges with space-between */}
|
||||||
<div></div>
|
<div></div>
|
||||||
{nextHeading && (
|
{nextHeading && (
|
||||||
<div className={styles.clickable}>
|
<Link url={nextHeading.url}>
|
||||||
<Link url={nextHeading.url}>
|
<div className={styles.footerSection}>
|
||||||
<div className={styles.footerSection}>
|
<div>
|
||||||
<div>
|
<div className={styles.prevNext + " " + styles.nextText}>
|
||||||
<div className={styles.prevNext + " " + styles.nextText}>
|
Next
|
||||||
Next
|
|
||||||
</div>
|
|
||||||
<div className={styles.arrowHeading}>{nextHeading.name}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<svg
|
<div className={styles.arrowHeading}>{nextHeading.name}</div>
|
||||||
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>
|
</div>
|
||||||
</Link>
|
<svg
|
||||||
</div>
|
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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue