From ce289294a03a1eb28da48cdb4cddc5124053aaa3 Mon Sep 17 00:00:00 2001
From: Ashelyn Rose <git@tempest.dev>
Date: Tue, 9 May 2023 03:13:56 -0600
Subject: about pages, added profile pictures

---
 components/InfoBar/index.tsx | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

(limited to 'components/InfoBar/index.tsx')

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>
     )
   }
-- 
cgit 1.4.1