114 lines
2.8 KiB
TypeScript
114 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import { EventDescriptionCard } from "./EventDescriptionCard";
|
|
|
|
import styles from "./playground.module.css";
|
|
|
|
import AfterHoursContent, {
|
|
metadata as afterHoursMetadata,
|
|
} from "../content/playground/after-hours.event.mdx";
|
|
import UnavailableContent, {
|
|
metadata as unavailableMetadata,
|
|
} from "../content/playground/unavailable.news.mdx";
|
|
|
|
import { MiniEventCard } from "./MiniEventCard";
|
|
import { NewsCard } from "./NewsCard";
|
|
|
|
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 NewsCardDemo() {
|
|
return (
|
|
<div className={styles.news}>
|
|
<div className={styles.newsTitle}>News</div>
|
|
<div className={styles.newsDesc}>
|
|
Updates from our execs
|
|
<br />
|
|
<br />
|
|
</div>
|
|
<hr className={styles.newsHr} />
|
|
<NewsCard {...unavailableMetadata}>
|
|
<UnavailableContent />
|
|
</NewsCard>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function EventDescriptionCardDemo() {
|
|
const { name, short, date } = afterHoursMetadata;
|
|
|
|
return (
|
|
<div className={styles.eventDescriptionCardDemo}>
|
|
<EventDescriptionCard
|
|
name={name}
|
|
date={date}
|
|
online={true}
|
|
location="Twitch"
|
|
poster="/images/playground/intro-ootb.jpg"
|
|
registerLink="/"
|
|
>
|
|
<p>{short}</p>
|
|
</EventDescriptionCard>
|
|
<EventDescriptionCard
|
|
name={name}
|
|
date={date}
|
|
online={true}
|
|
location="Twitch"
|
|
poster="/images/playground/alt-tab.jpg"
|
|
registerLink="/"
|
|
>
|
|
<p>{short}</p>
|
|
</EventDescriptionCard>
|
|
<EventDescriptionCard
|
|
name={name}
|
|
date={date}
|
|
online={true}
|
|
location="Twitch"
|
|
poster="/images/playground/intro-ootb.jpg"
|
|
registerLink="/"
|
|
>
|
|
<p>{short}</p>
|
|
</EventDescriptionCard>
|
|
</div>
|
|
);
|
|
}
|