You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.3 KiB
TypeScript
67 lines
1.3 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import styles from './InfoBar.module.css'
|
|
|
|
interface ArbitraryChildrenProps {
|
|
children: ReactNode
|
|
}
|
|
|
|
interface SideNoteProps {
|
|
text: string
|
|
}
|
|
|
|
interface PostInfoPros {
|
|
publishedDate: Date,
|
|
authorName: string
|
|
}
|
|
|
|
interface SystemMemberInfoProps {
|
|
memberName: string,
|
|
memberAvatar: string
|
|
}
|
|
|
|
type InfobarProps = (
|
|
ArbitraryChildrenProps
|
|
| SideNoteProps
|
|
| PostInfoPros
|
|
| SystemMemberInfoProps
|
|
)
|
|
|
|
export default function InfoBar(props: InfobarProps) {
|
|
if ('text' in props) {
|
|
return (
|
|
<aside className={`${styles.infobar} ${styles.sideNote}`}>
|
|
{props.text}
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
if ('authorName' in props) {
|
|
return (
|
|
<aside className={`${styles.infobar} ${styles.postMeta}`}>
|
|
<span>
|
|
by <span className={styles.author}>{props.authorName}</span>;{' '}
|
|
<span className={styles.date}>published {props.publishedDate.toLocaleDateString()}</span>
|
|
</span>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
if ('memberName' in props) {
|
|
return (
|
|
<aside className={`${styles.infobar} ${styles.sideNote}`}>
|
|
{props.memberName}
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
if ('children' in props) {
|
|
return (
|
|
<aside className={styles.infobar}>
|
|
{props.children}
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
throw new Error('Unknown infobar type')
|
|
}
|