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 fa1ad02690
commit 0bf1033c4a
3 changed files with 135 additions and 166 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. 1
      components/OrganizedContent.module.css
  2. 298
      components/OrganizedContent.tsx
  3. 2
      pages/playground.mdx

1
components/OrganizedContent.module.css
Unescape View File

@ -3,6 +3,7 @@
}
.contentHeading {
font-size: 1.5rem;
margin: 1rem 0 1rem 0;
color: var(--blue-2);
}

298
components/OrganizedContent.tsx
Unescape View File

@ -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,55 +34,39 @@ 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}>
<div className={styles.nav}>
{headings.map((heading, index) => (
<div
className={
index === currentIndex ? styles.selectedHeadingArea : ""
}
key={heading.url}
>
<div
className={
styles.navOption +
" " +
(index === currentIndex
? styles.selectedHeading
: heading.name === "Read All"
? styles.readAll
: "")
}
>
{index === currentIndex && (
<span className={styles.selectedMarker} />
)}
<Link url={heading.url}>{heading.name}</Link>
</div>
<div className={styles.divider}></div>
</div>
))}
</div>
<Nav headings={headings} currentIndex={currentIndex} link={Link} />
<div>
{!isReadAll ? (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
) : (
{isReadAll ? (
<div>
{headings
.filter(
@ -89,136 +79,112 @@ export const OrganizedContent: React.FC<Props> = ({
</div>
))}
</div>
) : (
<h2 className={styles.contentHeading}>
{headings[currentIndex].name}
</h2>
)}
{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>
<Footer headings={headings} currentIndex={currentIndex} link={Link} />
</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>
))}
}
};
const Nav: React.FC<ChildProps> = ({ headings, currentIndex, link: Link }) => {
return (
<div className={styles.nav}>
{headings.map((heading, index) => (
<div
className={index === currentIndex ? styles.selectedHeadingArea : ""}
key={heading.url}
>
<div
className={
styles.navOption +
" " +
(index === currentIndex
? styles.selectedHeading
: heading.name === "Read All"
? styles.readAll
: "")
}
>
{index === currentIndex && (
<span className={styles.selectedMarker} />
)}
<Link url={heading.url}>{heading.name}</Link>
</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 className={styles.divider}></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>
)}
<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>
</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>
</Link>
<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>
);
};

2
pages/playground.mdx
Unescape View File

@ -70,3 +70,5 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
Codey is supposed to say something here...
<OrganizedContentDemo />
---
Write Preview
Loading…
Cancel
Save