www
/
www-new
12
2
Fork 3
Code Issues 56 Pull Requests 30 Projects Releases Wiki Activity

Refactor

Browse Source
merge-requests/12/head
William Tran 2 years ago
parent 429a9ae9fb
commit 07a2909c81
2 changed files with 64 additions and 84 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      components/OrganizedContent.module.css
  2. 144
      components/OrganizedContent.tsx

4
components/OrganizedContent.module.css
Unescape 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
Unescape 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>
);

Write Preview
Loading…
Cancel
Save