about pages, added profile pictures

1 files changed, 20 insertions, 5 deletions

diff --git a/components/InfoBar/index.tsx b/components/InfoBar/index.tsx
index cb5ac9a..2901883 100644
--- a/components/InfoBar/index.tsx
+++ b/components/InfoBar/index.tsx
@@ -1,4 +1,8 @@
 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 {
@@ -15,8 +19,7 @@ interface PostInfoPros {
 }
 
 interface SystemMemberInfoProps {
-  memberName: string,
-  memberAvatar: string
+  memberName: string
 }
 
 type InfobarProps = (
@@ -36,8 +39,14 @@ export default function InfoBar(props: InfobarProps) {
   }
 
   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}`}>
+      <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>
@@ -47,9 +56,15 @@ export default function InfoBar(props: InfobarProps) {
   }
 
   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.sideNote}`}>
-        {props.memberName}
+      <aside className={`${styles.infobar} ${styles.memberProfile}`} style={style}>
+        <Image alt="" width={150} height={150} src={picture} />
+        <h1>{props.memberName}</h1>
       </aside>
     )
   }