about pages, added profile pictures

2 files changed, 49 insertions, 6 deletions

diff --git a/components/InfoBar/InfoBar.module.css b/components/InfoBar/InfoBar.module.css
index 7786bd1..523bf42 100644
--- a/components/InfoBar/InfoBar.module.css
+++ b/components/InfoBar/InfoBar.module.css
@@ -21,14 +21,42 @@
   color: var(--text-dimmed);
 }
 
+.infobar.postMeta img {
+  box-sizing: border-box;
+  border: solid 2px var(--author-color, var(--text-dimmed));
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  margin-right: calc(.5 * var(--text-padding));
+  margin-left: -6px;
+}
+
 .infobar.postMeta .author {
-  color: var(--text-medium);
+  color: var(--author-color, var(--text-medium));
 }
 
 .infobar.postMeta .date {
   font-style: italic;
 }
 
+.infobar.memberProfile img {
+  width: 150px;
+  height: 150px;
+  border-radius: 75px;
+  box-sizing: border-box;
+  border: solid 4px var(--member-color, var(--text-dimmed));
+  margin-right: var(--text-padding);
+  margin-top: calc(-2.5 * var(--text-padding));
+} 
+
+.infobar.memberProfile h1 {
+  color: var(--member-color, var(--text-bright));
+}
+
 .infobar + p {
   margin-top: 0;
 }
+
+.infobar.memberProfile {
+  margin-bottom: 42px;
+}
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>
     )
   }