c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Use Content Component

Browse Source
This commit is contained in:
Daniel Kluge
2022-10-15 22:17:51 +02:00
parent c4b3471062
commit 46c755481a
6 changed files with 50 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/Blog/ContentPage.tsx Normal file
View File

@ -0,0 +1,14 @@
import type { NextPage } from "next";
import type { ProjectRender, DiaryRender } from "../../lib/content/types";
import DiaryPageSelector from "./DiaryPageSelector";
const ContentPage: NextPage<{ content: ProjectRender | DiaryRender }> = ({ content }) => {
return (<>
{content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} /> : null}
<div dangerouslySetInnerHTML={{ __html: content.html }}>
</div>
{content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} bottom /> : null}
</>);
};
export default ContentPage;

11
components/Blog/DiaryPageSelector.tsx
View File

@ -3,11 +3,11 @@ import Link from "next/link";
import { useRouter } from "next/router";
import type { ChangeEvent, ChangeEventHandler } from "react";
import { useEffect } from "react";
import type { DiaryEntry } from "../../lib/content/types";
import styles from "../../styles/Blog/DiaryPageSelector.module.scss";
interface IContent {
pages: string[];
name: string;
title: string;
pageSelected: number
@ -15,10 +15,12 @@ interface IContent {
interface IContentNavBar extends IContent {
mobile?: boolean;
pages: string[];
}
interface IContentNav extends IContent {
bottom?: boolean;
pages: DiaryEntry[];
}
const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected, mobile }) => {
@ -64,17 +66,18 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
};
const PageSelector: NextPage<IContentNav> = (content) => {
const entries = content.pages.map(p => p.title);
if (content.bottom) return <PageSelectorBar pages={content.pages} name={content.name} title={content.title} pageSelected={content.pageSelected} />;
if (content.bottom) return <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} />;
return (
<div className={styles.nav}>
<PageSelectorBar pages={content.pages} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
<PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
<div className={`${styles.sideNav} ${styles.desktop}`}>
<Link href={`/blog/diary/${content.name}`}><a><h4>{content.title}</h4></a></Link>
<ul>
{content.pages.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
{entries.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
</ul>
</div>
</div>