feat: added author card to strats page

__tests__/mocks.ts

@@ -0,0 +1,21 @@
+import { Author } from '../src/types/author';
+import { Strat } from '../src/types/strat';
+
+export function mockStrat(overrides?: Partial<Strat>): Strat {
+    return {
+        id: '1234',
+        name: 'Strats for Stratty things!',
+        author: mockAuthor(),
+        ...overrides
+    };
+}
+
+export function mockAuthor(overrides?: Partial<Author>): Author {
+    return {
+        uid: 'marcy',
+        name: 'Marcy',
+        image: 'https://avatars.githubusercontent.com/u/9692284?v=4',
+        pronouns: ['she/her', 'they/them'],
+        ...overrides
+    };
+}

__tests__/prebuilts.ts

@@ -0,0 +1,22 @@
+import { mockAuthor } from './mocks';
+
+export const authors = {
+    ceci: mockAuthor({
+        uid: 'ceci',
+        name: 'Ceci',
+        image: 'https://avatars.githubusercontent.com/u/9692284?v=4',
+        pronouns: ['she/hers', 'they/them']
+    }),
+    clover: mockAuthor({
+        uid: 'clover',
+        name: 'Clover',
+        image: 'https://i.imgur.com/WKXMkzY.png',
+        pronouns: ['she/her', 'they/them', 'he/him']
+    }),
+    mumu: mockAuthor({
+        uid: 'mumu',
+        name: 'Mumu',
+        image: 'https://i.imgur.com/I4bUHxt.png',
+        pronouns: ['they/them']
+    })
+}

next.config.mjs

@@ -5,7 +5,11 @@
  */
 const nextConfig = {
     images: {
-        domains: ['cdn.discordapp.com']
+        domains: [
+            'cdn.discordapp.com',
+            'avatars.githubusercontent.com',
+            'i.imgur.com'
+        ]
     }
 };
 

src/components/common/Avatar.module.scss

@@ -1,3 +1,8 @@
 .avatar {
+    position: relative;
     border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1/1;
+    min-width: 40px;
+    user-select: none;
 }

src/components/common/Avatar.tsx

@@ -9,11 +9,11 @@ export function Avatar({
     src
 }: AvatarProps): JSX.Element {
     return (
-        <Image
-            className={styles.avatar}
-            width={40}
-            height={40}
-            src={src}
-        />
+        <div className={styles.avatar}>
+            <Image
+                layout='fill'
+                src={src}
+            />
+        </div>
     )
 }

src/components/common/Pronouns.tsx

@@ -0,0 +1,30 @@
+import { useReadOnlyCachedState } from '../hooks/use-cached-state';
+import styles from './Avatar.module.scss';
+
+export type PronounsProps = {
+    pronouns: string[];
+}
+
+export function Pronouns({
+    pronouns: externalPronouns
+}: PronounsProps): JSX.Element {
+    const pronouns = useReadOnlyCachedState(() => {
+        let formattedPronouns: string[];
+        if (externalPronouns.length === 1) {
+            formattedPronouns = externalPronouns[0].split('/');
+        } else {
+            formattedPronouns = externalPronouns.reduce((output, pronoun) => {
+                output.push(pronoun.split('/')[0])
+                return output;
+            }, []);
+        }
+
+        return formattedPronouns.join(' / ');
+    }, [externalPronouns]);
+
+    return (
+        <div className={styles.pronouns}>
+            {pronouns}
+        </div>
+    )
+}

src/components/common/Typography.module.scss

@@ -0,0 +1,9 @@
+.typography {
+    line-height: 1;
+}
+
+.h1 {
+    font-weight: normal;
+    margin: 0;
+    font-size: 50px;
+}