|
|
|
import { ReactNode } from 'react'
|
|
|
|
import Image from 'next/image'
|
|
|
|
|
|
|
|
import system from '~/config/system.json'
|
|
|
|
import profilePics from '~/utils/profiles'
|
|
|
|
import styles from './InfoBar.module.css'
|
|
|
|
|
|
|
|
interface ArbitraryChildrenProps {
|
|
|
|
children: ReactNode
|
|
|
|
}
|
|
|
|
|
|
|
|
interface SideNoteProps {
|
|
|
|
text: string
|
|
|
|
}
|
|
|
|
|
|
|
|
interface PostInfoPros {
|
|
|
|
publishedDate: Date,
|
|
|
|
authorName: string
|
|
|
|
}
|
|
|
|
|
|
|
|
interface SystemMemberInfoProps {
|
|
|
|
memberName: 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) {
|
|
|
|
const authorKey = props.authorName.toLowerCase()
|
|
|
|
const author = system.members.find((member) => member.name === props.authorName)
|
|
|
|
const style = { '--author-color': author?.color } as React.CSSProperties
|
|
|
|
const picture = profilePics[authorKey]
|
|
|
|
|
|
|
|
return (
|
|
|
|
<aside className={`${styles.infobar} ${styles.postMeta}`} style={style}>
|
|
|
|
{picture && <Image alt="" width={50} height={50} src={picture} />}
|
|
|
|
<span>
|
|
|
|
by <span className={styles.author}>{props.authorName}</span>;{' '}
|
|
|
|
<span className={styles.date}>published {props.publishedDate.toLocaleDateString()}</span>
|
|
|
|
</span>
|
|
|
|
</aside>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
if ('memberName' in props) {
|
|
|
|
const memberKey = props.memberName.toLowerCase()
|
|
|
|
const member = system.members.find((member) => member.name === props.memberName)
|
|
|
|
const style = { '--member-color': member?.color } as React.CSSProperties
|
|
|
|
const picture = profilePics[memberKey]
|
|
|
|
|
|
|
|
return (
|
|
|
|
<aside className={`${styles.infobar} ${styles.memberProfile}`} style={style}>
|
|
|
|
<Image alt="" width={150} height={150} src={picture} />
|
|
|
|
<h1>{props.memberName}</h1>
|
|
|
|
</aside>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
if ('children' in props) {
|
|
|
|
return (
|
|
|
|
<aside className={styles.infobar}>
|
|
|
|
{props.children}
|
|
|
|
</aside>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
throw new Error('Unknown infobar type')
|
|
|
|
}
|