Support description in OrganizedContent Header
This commit is contained in:
parent
5a52682c76
commit
eda8393a7a
|
@ -19,6 +19,15 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.imageRight {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.imageRight .header {
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.headerContainer {
|
||||
flex-direction: column;
|
||||
|
@ -34,4 +43,8 @@
|
|||
.headerImage {
|
||||
width: calc(100rem / 16);
|
||||
}
|
||||
|
||||
.description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,14 +8,29 @@ export interface Props {
|
|||
title: string;
|
||||
image: string;
|
||||
children: ReactNode;
|
||||
description?: string;
|
||||
imagePosition?: "left" | "right";
|
||||
}
|
||||
|
||||
export function Header({ title, image, children }: Props) {
|
||||
export function Header({
|
||||
title,
|
||||
image,
|
||||
children,
|
||||
description,
|
||||
imagePosition,
|
||||
}: Props) {
|
||||
return (
|
||||
<main className={styles.page}>
|
||||
<header className={styles.headerContainer}>
|
||||
<header
|
||||
className={`${styles.headerContainer} ${
|
||||
imagePosition === "right" ? styles.imageRight : ""
|
||||
}`}
|
||||
>
|
||||
<Image src={image} className={styles.headerImage} />
|
||||
<h1 className={styles.header}>{title}</h1>
|
||||
<div>
|
||||
<h1 className={styles.header}>{title}</h1>
|
||||
{description && <p className={styles.description}>{description}</p>}
|
||||
</div>
|
||||
</header>
|
||||
{children}
|
||||
</main>
|
||||
|
|
|
@ -26,10 +26,19 @@ export interface Options {
|
|||
pagePath: string;
|
||||
title: string;
|
||||
image: string;
|
||||
imagePosition?: "left" | "right";
|
||||
link?: ComponentType<LinkProps>;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export function createReadAllPage({ title, image, pagePath, link }: Options) {
|
||||
export function createReadAllPage({
|
||||
title,
|
||||
image,
|
||||
pagePath,
|
||||
link,
|
||||
description,
|
||||
imagePosition,
|
||||
}: Options) {
|
||||
const Link = link ?? createLink(pagePath);
|
||||
|
||||
return function Page({ sections }: Props) {
|
||||
|
@ -44,7 +53,12 @@ export function createReadAllPage({ title, image, pagePath, link }: Options) {
|
|||
);
|
||||
|
||||
return (
|
||||
<Header title={title} image={image}>
|
||||
<Header
|
||||
title={title}
|
||||
image={image}
|
||||
description={description}
|
||||
imagePosition={imagePosition}
|
||||
>
|
||||
<OrganizedContent
|
||||
id={readAllSection.section.id}
|
||||
sections={[
|
||||
|
|
|
@ -1,13 +1,10 @@
|
|||
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
||||
import React, { ComponentType } from "react";
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
createLink,
|
||||
LinkProps,
|
||||
OrganizedContent,
|
||||
} from "@/components/OrganizedContent";
|
||||
import { createLink, OrganizedContent } from "@/components/OrganizedContent";
|
||||
|
||||
import { Header } from "./Header";
|
||||
import { Options } from "./ReadAll";
|
||||
|
||||
interface Section {
|
||||
id: string;
|
||||
|
@ -20,19 +17,24 @@ export interface Props {
|
|||
current: number;
|
||||
}
|
||||
|
||||
export interface Options {
|
||||
title: string;
|
||||
pagePath: string;
|
||||
image: string;
|
||||
link?: ComponentType<LinkProps>;
|
||||
}
|
||||
|
||||
export function createSectionPage({ title, image, pagePath, link }: Options) {
|
||||
export function createSectionPage({
|
||||
title,
|
||||
image,
|
||||
pagePath,
|
||||
link,
|
||||
description,
|
||||
imagePosition,
|
||||
}: Options) {
|
||||
const Link = link ?? createLink(pagePath);
|
||||
|
||||
return function Page(this: void, { content, sections, current }: Props) {
|
||||
return (
|
||||
<Header title={title} image={image}>
|
||||
<Header
|
||||
title={title}
|
||||
image={image}
|
||||
description={description}
|
||||
imagePosition={imagePosition}
|
||||
>
|
||||
<OrganizedContent
|
||||
sections={sections}
|
||||
id={sections[current].id}
|
||||
|
|
Loading…
Reference in New Issue