107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import styles from "./playground.module.css";
|
|
|
|
import AfterHoursContent, {
|
|
metadata as afterHoursMetadata,
|
|
} from "../content/playground/after-hours.event.mdx";
|
|
|
|
import { MiniEventCard } from "./MiniEventCard";
|
|
import { OrganizedContent, LinkProps } from "./OrganizedContent";
|
|
|
|
export function MiniEventCardDemo() {
|
|
const { name, location, short, date } = afterHoursMetadata;
|
|
|
|
const dateString = date.toLocaleDateString("en-US", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
const timeString = date.toLocaleTimeString("en-US", {
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
});
|
|
|
|
return (
|
|
<div className={styles.miniEventCardDemo}>
|
|
<MiniEventCard
|
|
name={name}
|
|
date={dateString}
|
|
time={timeString}
|
|
descriptionShort={short}
|
|
location={location}
|
|
description={<AfterHoursContent />}
|
|
/>
|
|
<MiniEventCard
|
|
name={name}
|
|
date={dateString}
|
|
time={timeString}
|
|
descriptionShort={short}
|
|
location={location}
|
|
description={<AfterHoursContent />}
|
|
/>
|
|
<MiniEventCard
|
|
name={name}
|
|
date={dateString}
|
|
time={timeString}
|
|
descriptionShort={short}
|
|
location={location}
|
|
description={<AfterHoursContent />}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function OrganizedContentDemo() {
|
|
let sections = [
|
|
{
|
|
name: "Heading1",
|
|
url: "a",
|
|
content: <div> Hello World! 1</div>,
|
|
},
|
|
{
|
|
name: "Heading2",
|
|
url: "b",
|
|
content: <div> Hello World! 2</div>,
|
|
},
|
|
{
|
|
name: "Heading3",
|
|
url: "c",
|
|
content: <div> Hello World! 3</div>,
|
|
},
|
|
];
|
|
|
|
const readAllSection = {
|
|
name: "Read all",
|
|
url: "readall",
|
|
content: <>{sections.map((section => section.content))}</>
|
|
}
|
|
|
|
sections = [readAllSection, ...sections];
|
|
|
|
const [index, setIndex] = useState(0);
|
|
|
|
function FakeLink({ url, children }: LinkProps) {
|
|
return (
|
|
<div
|
|
onClick={() => {
|
|
const target = sections.findIndex((section) => section.url === url);
|
|
|
|
if (target >= 0) {
|
|
setIndex(target);
|
|
}
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const { content } = sections[index];
|
|
|
|
return (
|
|
<OrganizedContent headings={sections} currentIndex={index} link={FakeLink}>
|
|
{content}
|
|
</OrganizedContent>
|
|
);
|
|
}
|