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

Add ReadAll functionality

Browse Source
merge-requests/12/head
William Tran 2 years ago
parent ffbfdac772
commit 1a203f4f4f
2 changed files with 141 additions and 109 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. 246
      components/OrganizedContent.tsx
  2. 4
      components/playground.tsx

246
components/OrganizedContent.tsx
Unescape View File

@ -1,106 +1,140 @@
import React, { ReactNode, ComponentType } from "react";
import styles from "./OrganizedContent.module.css";
export interface LinkProps {
children: string | ReactNode | (string | ReactNode)[]
url: string
}
type Link = ComponentType<LinkProps>
interface Heading {
name: string;
url: string;
}
interface Props {
headings: Heading[];
currentIndex: number;
link: Link
children: ReactNode;
}
export const OrganizedContent: React.FC<Props> = ({
headings,
currentIndex,
children,
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.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 : '')}
>
<Link url={heading.url}>{heading.name}</Link>
</div>
<div className={styles.divider}></div>
</div>
))}
</div>
<div>
{!isReadAll &&
<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>
</div>
</div>
);
};
import React, { ReactNode, ComponentType } from "react";
import styles from "./OrganizedContent.module.css";
export interface LinkProps {
children: string | ReactNode | (string | ReactNode)[];
url: string;
}
type Link = ComponentType<LinkProps>;
interface Heading {
name: string;
url: string;
content: ReactNode;
}
interface Props {
headings: Heading[];
currentIndex: number;
link: Link;
children: ReactNode;
}
export const OrganizedContent: React.FC<Props> = ({
headings,
currentIndex,
children,
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.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
: "")
}
>
<Link url={heading.url}>{heading.name}</Link>
</div>
<div className={styles.divider}></div>
</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>
);
};

4
components/playground.tsx
Unescape View File

@ -116,7 +116,6 @@ export function OrganizedContentDemo() {
{
name: "Consequences of Unacceptable Behavior",
url: "d",
key: "d",
content: <div> CODEY </div>,
},
];
@ -124,8 +123,7 @@ export function OrganizedContentDemo() {
const readAllSection = {
name: "Read All",
url: "readall",
key: "readall",
content: <div> CODEY FAN CLUB </div>,
content: <div> </div>,
};
sections = [readAllSection, ...sections];

Write Preview
Loading…
Cancel
Save